2021入门Webpack，看这篇就够了：Webpack.config.js 解析

这是一个webpack配置说明

本文是发布在github上webpack-demo的README文件内容。 主要对webpack.config.js每一条的注释说明。 希望浏览效果更佳，可以点击文章最下方**【阅读原文】**跳转github链接查看，或下载实战代码直接食用。

Run the example

$ npm install
$ npm start

介绍 Introduce

这个demo是简单的webpack配置demo，您可以根据实际项目需求，按照下方的配置说明，个性化的配置您的项目。

您也可以关注我，后续会发布最新的依赖的脚手架项目

This demo is a simple webpack configuration demo, you can personalise your project according to your actual project requirements by following the configuration instructions below.

You can also follow me and I will be posting the latest scaffolding projects with dependencies

webpack.config.js 配置说明 Configuration instructions

注释很详细，原文发表在github: https://github.com/hourong88/webpack-demo

The following comments are in Chinese, you can use the software to translate them

const path = require('path')

// module.exports = function (webpackEnv) {
    module.exports = {
    //定义生产环境和开发环境
    //开发环境development 和生产环境 production构建目标差异很大
    //开发环境：需要强大的，具有实时重新加载或热模块替换能力，source map 和 localhost server 调试能力
    //生产环境: 我们关注更小的bundle，更轻量的source map，更优化的资源，改善加载时间。
    //所以不同环境配置不同，有倾向性。
    // const isEnvDevelopment = webpackEnv === 'development';
    // const isEnvProduction = webpackEnv === 'production';
    // const publicPath = isEnvProduction ? '/ui/' : isEnvDevelopment && '/';

    // return{
        //entry表示入口，webpack构建第一步将从entry开始，输入类型可以抽象为字符串，数组和对象。从入口开始，递归搜寻及解析出所有入口依赖的模块。 entry是必填的，否则会报错、退出
        entry: './src/app.js', //可以有一个入口，也可以有多个入口，多个入口对应多个**chunk**，具体写法看中文文档。entry根据构建出来的依赖关系图，从而知道哪些部分将会输出为bundle。
        //什么是chunk？
        //webpack专用术语，用于管理webpack打包进程。chunk和输出的**bundle**一一对应，但是，有些是一对多的关系。
        //如果entry配置的是对象object，可能就会出现多个thunk，这时候thunk名称是对象健值对中健的名称
        //什么是bundle？
        //bundle是已经加载完毕，和被编译后的源代码最终版本。由多个模块产生，一个应用可以拆分为多个bundle。Bundle Splitting是webpack优化代码的一种方法。
        //总之，chunk和bundle都可以拆分，按需加载，减少代码量。
        output: {
            path: path.resolve(__dirname , 'dist'), //输出文件存放的路径
            //filename: isEnvDevelopment ? 'bundle.js' : '[name].js',//输出文件完整名称，即使指定了多个入口点（entry points），output配置项也只能设置一个。
            filename:'bundle.js',
            publicPath: publicPath,//发布到线上，所有资源的URL前缀
            pathInfo:true,//是否包含有用的文件路径信息到生成到代码里，为布尔类型。
            chunkFilename:'[name].js',//chunk文件名称
            sourceMapFilename:'[file].map',//生成到source map文件名称
            devtoolModuleFilenameTemplate: 'webpack:lll[resource-path ]', //浏览器开发者工具显示的源码模块名称
            },
            //配置模块
        module: {
            rules:[
                { //babel es6转es5 兼容 babel-loader 同步的
                //配置模块的读取和解析规则，通常用来配置Loader。对模块源码进行转换
                test: /\.(js|mjs|jsx|ts|tsx)$/,//正则匹配命中要使用loader的文件,通过test、 inc1ude、 exclude三个配置项来选中Loader要应用规则的文件。
                include:[
                    path.resolve(__dirname , 'src') //只会命中这里面的文件
                ],
                exclude: /node_modules/, //忽略这里面的文件
                use: [//使用哪些loader，有先后次序，从后向前执行
                    'style-loader', //直接使用loader名称 scss 文件的处理顺序为先 sass-loader，再 css-loader，再 style-loader
                    {
                        options: {
                        //向html-loader传一些参数
                        },
                        loader: require.resolve('eslint-loader'),
                        //常用loader 分别配置
                        //转换编译：script-loader, babel-loader,ts-loader,coffee-loader
                        //处理样式：style-loader,css-loader,less-loader,sass-loader,postcss-loader（postcss和scss关系类似babel和js）
                        //处理文件：raw--loader,url-loader,file-loader
                        //处理数据：csv-loader,xml-loader
                        //处理模板语言：html-loader,pug-loader,jade-loader,markdown-loader
                        //清理和测试：mocha-loader,eslint-loader
                        //react：babel-preset-react
                    },
                ],
                },
            ],
            noParse:[ //提高webpack构建性能，忽略没采用模块化的文件递归处理
                //noParse文件不能包含模块化的语句import，require，defind，不然会导致构建文件无法在浏览器浏览
                /lspecial-library\.js$1 //用正则匹配
            ]
        },
        plugins:[
            //配置插件,扩展webpack功能，plugin配置项接收一个数组，数组每一项都是使用一个plugin实例，plugin的参数通过构造函数传入。使用plungin，需要在社区找到plugin本身提供的配置项
        ],
        resolve: { //配置寻找模块的规则
            modules: [ //寻找模块的根目录，为 array 类型，默认以 node_modules 为根目录
            'node_modules',
            path.resolve( dirname, 'app'),
            ],
            extensions: ['.js', '.json', '.jsx', '.css'], //模块的后缀名
            alias :{ //除了可以用对象，也可以用数组进行详细配置
            //将'module’映射成'new-module', 'module/path/file'映射成'new-module/path/file’
            //通过别名映射原来的路径为新路径
            'module':'new-module',
            },
            symlinks: true , // 是否跟随文件的软链接去搜寻模块的路径
            descriptionFiles: ['package.json'],//模块的描述文件
            mainFields : ['main'], //模块的描述文件里描述入口的文件的字段名
            enforceExtension: false, //是否强制导入语句写明文件后缀,如果为true，导入模块必须带后缀
            },
        performance: { //输出文件性能检查配置
            hints: false, // 关闭性能检查
            maxAssetSize: 200000 , // 最大文件的大小(单位为 bytes)
        },
        devtool: 'source-map', //用于开发环境调试，生产环境可以不配置
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true, //实时刷新
            hot: true
        },
        target: 'web', //浏览器，默认
        profile: true, // 是否捕捉 Webpack构建的性能信息，用于分析是什么原因导致构建性能不佳
        cache : false , // 是否启用缓存来提升构建速度
    }
// }

//优化

//1.缩小文件搜索范围
//* loader 调整目录结构，include缩小命中范围
//* resolve 定义搜索绝对路径
//* alias 映射新路径
//* extensions: [’js’],尽可能减少后缀尝试搜索的可能性
//* noParse 忽略没用模块化的文件

//2.用dllPlugin
// 动态链接库 antd react charts

//3.HappyPack 分解任务，多线程解析和处理文件 loader最耗时 happypack/loader

//4.自动刷新 watch监听 不监听node_modules

//5.区分环境 开发和生产

//6.压缩代码 uglifyJs 压缩js；cssnano 压缩css

//7.cdn加速

//8.tree shaking 可以用来剔除js中用不上的死代码

//9.提取公共代码，组件 公共代码base.js 所有页面都依赖的基础组件库，entry配置，打包成单独的trunk

//10.分割代码按需加载 import() 返回一个promise，output配置分割出去的thunk名称，在路由或者点击按钮事件里面配置

//11.使用prepack改变源码运行逻辑 plugin 运行时优化

//12.scope hoisting 作用于提升，打包出来的代码更小，运行更快 是一个plugin

//13.输出分析 webpack analyse

//[over]

延伸补充：

入门 Webpack，看这篇就够了