Webpack高级概念

正文

请到「今天看啥」查看全文

二. 开发和生产模式下的打包模式区分

可以分别配置开发和生产环境各自独立的配置文件

在打包的时候，通过package.json的scripts分别配置生产环境和开发环境各自的打包命令

// webpack.common.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    entry: path.resolve(__dirname,'./src/index.js'),
    output:{
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({
            title: 'prouction'
        })
    ]
}
复制代码

// webpack.dev.js
const common = require('./webpack.common')
const merge = require('webpack-merge')

module.exports = merge(common,{
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    }
})
复制代码

// webpack.prod.js
const merge = require('webpack-merge')
const common = require('./webpack.common')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')

module.exports = merge(common,{
    mode: 'production',
    plugins: [
        new  UglifyJSPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_env'

请到「今天看啥」查看全文