Webpack 中的高级特性

// webpack.config.jsmodule.exports = {    ...    optimization: {        usedExports: true, // 只导出外部成员引用模块        // 此属性用于模块导入合并，因为单独的模块导入要使用_webpack_require_函数。        // 此属性就是可以利用_webpack_require_一次性导入所有模块，也叫作用域提升。        concatenateModules: true,         minimize: true, // 开启代码压缩    }    ...}

// 安装npm i babel-loader @babel/core @babel/preset-env -D// webpack.config.jsmodule.exports = {    ...    module:[        {            test:/\.js$/,            use:{                loader:'babel-loader',                options:{                    presets:[                        ['@babel/preset-env']                    ]                }            }        }    ]}

// 安装npm i babel-loader @babel/core @babel/preset-env -D// webpack.config.jsmodule.exports = {    ...    module:{        rules:[            {                test:/\.js$/,                use:{                    loader:'babel-loader',                    options:{                        presets:[                            // 强制使用commonjs转换                            ['@babel/preset-env', {modules: 'commonjs'}]                        ]                    }                }            }        ]    }}

// webpack.config.jsmodule.exports = {    ...    optimization: {        sideEffect: true    }    ...}
// package.json
{    "scripts": {},    "sideEffect": [        // 告知webpack此文件具有副作用        "./src/app.js",        // *通配符css文件        "*.css"    ]}

module.exports = {    entry: {            index: "./src/index.js",            add: "./src/add.js",    },    optimization: {        splitChunks: {            // 自动提取到一个公共的bundle.js中            chunks: "all"        }    }    plugins:[        ...        new HtmlWebpackPlugin({            filename: 'anout.html',            template: './aout.html',            chunks:['add']        }),        new HtmlWebpackPlugin({            titie: 'title',            template: './index.html',            meta:{                viewport: 'width=device-widt, initial-scale=2.0'            },            filename: 'index.html',            publicPath: './',            scriptLoading: 'module',            chunks:['index']        })        ...    ],    ...}

const hash = window.location.hash;const container = document.getElementById('app');switch(hash){    case 'title_1':     import('./title_1.js').then({default:title_1}=>{        container.appednChild(title_1())    });    break;    case 'title_2':     import('./title_2.js').then({default:title_1}=>{        container.appednChild(title_2())    });    break;    case 'title_3':     import('./title_3.js').then({default:title_1}=>{        container.appednChild(title_3())    });    break;    default:}

const path = require('path');const DllPlugin = require('webpack/lib/DllPlugin');
module.exports = {  // 入口文件  mode: "development",  entry: {    // 项目中用到该两个依赖库文件    lodash: ['lodash'],  },  // 输出文件  output: {    // 文件名称    filename: '[name].dll.js',     // 将输出的文件放到dist目录下    path: path.resolve(__dirname, 'vandor'),
    /*     存放相关的dll文件的全局变量名称，比如对于lodash来说的话就是 _dll_lodash, 在前面加 _dll     是为了防止全局变量冲突。    */    library: '_dll_[name]'  },  plugins: [    // 使用插件 DllPlugin    new DllPlugin({      /*       该插件的name属性值需要和 output.library保存一致，该字段值，也就是输出的 manifest.json文件中name字段的值。       比如在jquery.manifest文件中有 name: '_dll_jquery'      */      name: '_dll_[name]',
      /* 生成manifest文件输出的位置和文件名称 */      path: path.join(__dirname, 'vandor', '[name].manifest.json')    })  ]};

const webpack = require('webpack');module.exports = {    plugins:[        ...        new webpack.DllReferencePlugin({           manifest: require('./vandor/lodash.manifest.json')        }),        ...    ]}

/* webpackChunkName:'<chunkName>' */

// webpack.development.config.jsmodule.exports = {    mode:"development",    detool:"source-map"    ...}
// webpack.production.config.jsmodule.exports = {    mode:"production",    detool:"nosources-source-map"    ...}
// webpack.config.js
module.exports = (env, args) => {    // 公共配置    const config = {        module:{},        plugins:[],        ...    }   env === "development" ? require('./webpack.development.config.js'):require('./webpack.production.config.js')   return config;}

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...plugin:[    new MiniCssExtractPlugin()],module:{    rules:[        {            test:/\.css/,            use:[                // 通过link标签引入到页面中                MiniCssExtractPlugin.loader,                cssloader            ]        }    ]}

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
...// 非plugin中使用optimization:[    minimizer:[        new OptimizeCssAssetsWebpackPlugin()        new terser-webpack-plugin()    ]]

const terserWebpackPlugin = require('terser-webpack-plugin');
...optimization:[    minimizer:[        // 压缩css        new OptimizeCssAssetsWebpackPlugin()        // 压缩js        new terserWebpackPlugin()    ]]

splitChunks: {    cacheGroups: {        commons: {            chunks: "initial",//相同的chunks提出来            minChunks: 2,//依赖了两个以上的关系            minSize: 0 //这个依赖最小体积为0        },        vendor: {            test: /node_modules/,            // 默认选项，表示只要有依赖的第三方包就要拆出去，跟all差不多            chunks: "initial",            name: "vendor",            enforce: true        }    },}

module.exports = {    ...    // 通过外部引入第三方包    externals:['jQuery','lodash']    ...}

module.exports = {    resolve: {        alias:{            '@':'root/src' // 指定别名@，通过@可以找到文件目录        },        extensions:{            ['.jsx', '.tsx', '.vue'] // 指定webpack需要解析哪些类型的文件        },        modules:{            ['node_modules', 'root/src'] // 指定webpack需要解析那些范围的文件        }    }}

module.exports = {    cache: {      type: 'filesystem', // 文件系统    },}