webpack Develoment 和 Production 模式的打包

Tree Shaking
Tree Shaking 在打包过程把声明但不引入的函数过滤掉，减少体积 只支持ES Module 模式，不支持require()模式，
在webpack 开发环境下加入optimization模式

optimization: { 
    usedExports: true
}

还要在package.json 中加入 sideEffects属性
可赋值为false也可是数组，里面代表的改文件下来的文件不用进行过滤，直接打包

{
	sideEffects:[ "*.css"]
}

管理webpack配置文件
在项目的根目录下新建一个build文件夹，并创建三个文件
webpack.dev.js 开发环境下的配置文件
webpack.prod.js 生产环境的配置文件
webpack.common.js 公共的配置文件

合并配置文件
可以通过webpack-merge来合并webpack开发、生产环境下的公共配置文件
安装webpack-merge

npm install webpack-merge -D  // -D === --save-dev

webpack.common.js公共文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: {
        // 打包两次，不同名字
        main: './src/index.js'
        // sub: './src/index.js'
    },
    // 模块打包
    module: {
        rules: [
            {
                test: /\.(jpg|png|gif)$/, // 需要打包的文件后缀
                use: {
                    /**
                     * loader作用
                     *  当webpack不能识别非js文件时，就可以通过loader让webpack识别相关文件
                     * */

                    // loader: 'file-loader', // 使用什么样的loader打包

                    /**
                     * url-loader
                     * 会把图片打包成base64格式，
                     * 图片会打包到js里面，js过大时会导致图片加载很慢
                     */
                    loader: 'url-loader',
                    options: {
                        // placeholder 占位符
                        name: '[name]_[hash].[ext]', // 打包出来的图片名字和后缀不变
                        outputPath: 'images/', // 打包到指定文件夹
                        limit: 2048 // 当图片大于2m时就会打包到指定的文件夹下面，否则就直接打包到js里面并转化为base64
                    }
                }
            }
            
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html' //模板
        }),
        new CleanWebpackPlugin(), //每次打包之前都清除dist文件
    ],
    output: {
        filename: '[name].js', // 打包出来的文件的名字对应中开发中的名字
        // __dirname指的是当前webpack.config.js当前所在目录的路径
        path: path.resolve(__dirname, '../dist') // 打包出来文件夹的名字，因为webpack配置文件抽离出来了，所以要添加文件所在路径
    }
}

开发环境下的webpack.dev.js配置

const webpack = require('webpack');
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common')

const devConfig = {
    mode: 'development', // 模式: production模式压缩代码; development模
    devtool: 'cheap-module-eval-source-map', // 次方式提示代码错误比较全面，打包速度也比较快
    devServer: {
        contentBase: './dist', // 在哪个文件夹启动
        open: true, // 启动webpack时，会自动打开浏览器
        proxy: {
            // 跨域代理 后台端域名
            '/api': 'http://localhost:3000'
        },
        // 启动端口号，默认是8080
        // port: 8080,
        hot: true,
        // hotOnly: false // 开始浏览器实时刷新 
    },
    plugins: [
    	//永远不要在生产环境(production)下启用 HMR
        new webpack.HotModuleReplacementPlugin()
    ], 
    optimization: { 
        usedExports: true
    },
};

module.exports = merge(devConfig, commonConfig)

生产环境下webpack.prod.js

const merge = require('webpack-merge')
const commonConfig = require('./webpack.common')
const prodConfig = {
    mode: 'production', // 模式: production模式压缩代码; development模式不压缩代码
    // mode:'production' production 线上代码，一般关闭devtool
    // 线上配置source-map
    devtool: 'cheap-module-source-map',
};

module.exports = merge(prodConfig, commonConfig)

修改package.json配置
在控制台运行npm run dev就会调用开发环境下的webpack.dev.js中的配置自动打开浏览器
运行npm run build 调用生产环境中的配置打包项目，使用过vue或者react对着build命令一点也不陌生。

"scripts": {
   "dev": "webpack-dev-server --config ./build/webpack.dev.js",
   "build": "webpack --config ./build/webpack.prod.js",
 },