这是优妈成长记的第63篇原创

这是一个webpack配置说明

本文是发布在github上webpack-demo的README文件内容。主要对webpack.config.js每一条的注释说明。

github项目地址：https://github.com/hourong88/webpack-demo

可以点击文章最下方【阅读原文】跳转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

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]