webpack 4.x 配置理解

webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,会在内部构建一个依赖图,此依赖图会映射项目所需要的每个模块,并且生成一个或者多个bundle。

一、入口(entry)

入口起点是构建其内部 依赖图的开始,进入后webpack 会找出项目所依赖的块和库,默认起点./src/index.js。

webpack 4.x 配置理解_第1张图片
webpack.config.js

    1、简单规则:每个HTML页面都有一个入口起点。单页面应用(SPA):一个入口起点,;多页面应用(MPA):多个入口起点

    2、命名:如果传入一个字符串或者字符串数组,chunk会被命名为main。如果传入一个对象,则每个键是chunk的名称,该值描述了chunk的入口起点。


二、输出(output)

输出属性是告诉webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件,主要输出文件默认输出位置:./dist/main.js,其他文件默认放置在 ./dist 文件夹中。

webpack 4.x 配置理解_第2张图片
webpack.config.js

    1、注:filename不会影响那些「按需加载 chunk」的输出文件。对于这些文件,请使用 output.chunkFilename 选项来控制输出。

    2、[hash] 和 [chunkhash] 的长度可以使用 [hash:16](默认为20)来指定。可通过指定output.hashDigestLength 在全局配置长度。

    3、output.pathinfo在 development 模式时的默认值是 true,而在 production 模式时的默认值是 false。在生产环境(production)下,不应该使用

    4、output.path 中的 URL 以 HTML 页面为基准

    5、js/[name].[contenthash].js:路劲加文件名


三、loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

    注意,loader 能够 import 导入任何类型的模块(例如 .css 文件),可以使开发人员创建出更准确的依赖关系图。

    在更高层面,在 webpack 的配置中 loader 有两个属性:

    1. test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。

    2. use 属性,表示进行转换时,应该使用哪个 loader。

webpack 4.x 配置理解_第3张图片
webpack.config.js

    1、mini-css-extract-plugin是将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap;通过配合html-webpack-plugin插件的使用,生成的html就会自动引入css文件啦。只能用在webpack4中,对比另一个插件 extract-text-webpack-plugin有点:

        ①. 异步加载        ②. 不重复编译,性能更好         ③. 更容易使用

    2、以上的配置中,对一个对象定义了rules属性,里面包含了两个属性,意味着告诉webpack编译器如下信息:“当碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先 使用 raw-loader 转换一下

    3、在 webpack 配置中定义 rules 时,要定义在 module.rules

    4、使用正则表达式匹配文件时,你不要为它添加引号。也就是说,/\.txt$/ 与 '/\.txt$/'/ "/\.txt$/" 不一样。


四、插件(plugin)

loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。

想要使用一个插件,你只需要 require() 它,然后把它添加到plugins 数组中。

由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例

webpack 4.x 配置理解_第4张图片
webpack.config.js

一、4.1 常用插件

    1、html-webpack-plugin

        ①用途:用于编译 Webpack 项目中的 html 类型的文件,为应用程序生成 HTML 一个文件。

        ②用法:

    new HtmlWebpackPlugin({

            filename:'index.html',

            template:resolvePath('../app/src/index.html'),

            inject:true

    })

        ③当未定义此插件的入口时,默认只为 index.html,输出同样是 index.html。

        ④可以为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题

        ⑤单页面可以生成一个html文件入口;配置N个html-webpack-plugin可以生成N个页面入口

        ⑥重构入口html,动态添加< link>和< script>,在以hash命名的文件上非常有用,因为每次编译都会改变

        ⑦配置项

        title:生成的html文档的标。并不会替换指定模板文件中的title元素的内容,除非html模板文件中使用了模板引擎语法来获取该配置项值,题

        filename:输出文件的文件名称,默认为index.html。还可以为输出文件指定目录位(例如'html/index.html')置

    template:  本地模板文件的位置[为template指定的模板文件没有指定任何loader的话,默认使用ejs-loader。如template: './index.html',若没有为.html指定任何loader就使用ejs-loader

    templateContent:可以指定模板的内容,不能与template共存。

    inject:向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同( 1. true或者body:所有JavaScript资源插入到body元素的底部   2. head: 所有JavaScript资源插入到head元素中    3. false: 所有静态资源css和JavaScript都不会注入到模板文件中)

    favicon: 添加特定favicon路径到输出的html文档中

     hash: true|false,是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值

    chunks: 允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中

    excludeChunks: none | auto| function,默认auto; 允许指定的thunk在插入到html文档前进行排序。> function值可以指定具体排序规则;auto基于thunk的id进行排序; none就是不排序

    xhtml: true|fasle, 默认false;是否渲染link为自闭合的标签,true则为自闭合标签

    cache:  true|fasle, 默认true; 如果为true表示在对应的thunk文件修改后就会emit文件

    showErrors: true|false,默认true;是否将错误信息输出到html页面中。这个很有用,在生成html文件的过程中有错误信息,输出到页面就能看到错误相关信息便于调试。

    2、ProvidePlugin:

        ①用途:$出现,就会自动加载模块;$默认为'jquery'的exports。

        ②用法:new webpack.ProvidePlugin({ $: 'jquery', })

    3、webpack.IgnorePlugin:

        ①用途:定义全局常量

        ②用法:

    new webpack.DefinePlugin({

        'process.env': {

                NODE_ENV:JSON.stringify(process.env.NODE_ENV)

        },

        PRODUCTION: JSON.stringify(PRODUCTION),

        APP_CONFIG: JSON.stringify(appConfig[process.env.NODE_ENV]),

    }),

    4、IgnorePlugin:

        ①用途:忽略regExp匹配的模块,排除部分不需要编译的文件

        ②用法:new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/,/node_modules$/)

    5、mini-css-extract-plugin

        ①用途:分离css文件

        ②用法:

       new MiniCssExtractPlugin({

           filename: 'css/[name].[contenthash:6].css',

       })

    6、vue-loader/lib/plugin

        ①Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的


五、模式(mode)

通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = { mode: 'production'};


六、浏览器兼容性(browser compatibility)

webpack 支持所有符合 ES5 标准 的浏览器(不支持 IE8 及以下版本)。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器,在使用这些表达式之前,还需要 提前加载 polyfill


七、解析(resolve)

模块解析(module resolution) : resolver 是一个库(library),用于帮助找到模块的绝对路径。resolver 帮助 webpack 从每个如 require/import 语句中,找到需要引入到 bundle 中的模块代码。 当打包模块时,webpack 使用 enhanced-resolve 来解析文件路径。

解析:该属性的作用是设置模块如何被解析

webpack 4.x 配置理解_第5张图片
webpack.config.js

    一、常用配置项

        1、esolve.alias:设置别名, 在vue中都是 @代表src目录。 也可以在key尾部添加$,精确匹配某一文件

module.exports = {

          resolve: {

                alias: {

                          Utilities: path.resolve(__dirname, 'src/utilities/'),

                          Templates: path.resolve(__dirname, 'src/templates/')

                }

          }

          //替换「在导入时使用相对路径」这种方式,就像这样:

          import Utility from '../../utilities/utility';

          //可以这样使用别名:

          import Utility from 'Utilities/utility';

    }

    2、resolve.extensions:自动解析确认的扩展,默认值为:extensions: [.wasm', '.mjs','.js', '.json'] .能够使用户在引入模块时不带扩展:

        import File from '../path/to/file';

    3、resolve.mainFiles:解析目录时要使用的文件名。 当你引入路径只精确到一个文件夹时, 引入文件夹中的哪个.js文件, 默认为: index

        module.exports = {

              resolve: {

                mainFiles: ['index']

              }

        };

    4、resolve.modules:告诉 webpack 解析模块时应该搜索的目录。绝对路径和相对路径都能使用,但是之间有一点差异。

    ①使用绝对路径,将只在给定目录中搜索。

        module.exports = {

                  resolve: {

                  modules: ['node_modules']

              }

        };

    ②如果你想要添加一个目录到模块搜索目录,此目录优先于 node_modules/ 搜索:        

        module.exports = {

                  resolve: {

                    modules: [path.resolve(__dirname, 'src'), 'node_modules']

                  }    

        };

    5、resolve.enforceExtension: 引入的模块文件后面要不要带扩展名, true:一定要带, 默认为 false

    import foo from './foo' // ./foo.js 中的.js可以省略

    6、resolve.enforceModuleExtension:对模块是否需要使用的扩展(例如 loader)。boolean: false默认


八、优化(optimization)

从 webpack 4 开始,会根据你选择的 mode 来执行不同的优化,不过所有的优化还是可以手动配置和重写。

webpack 4.x 配置理解_第6张图片
webpack.config.js

    一、常用配置项

        1、optimization.minimize:boolean,production 模式下,这里默认是 true。 

            告知 webpack 使用 TerserPlugin 压缩 bundle。

        module.exports = {      optimization: {        minimize: false      }    };

        2、optimization.minimizer: [] and or [function (compiler)]

            允许你通过提供一个或多个定制过的 TerserPlugin 实例,覆盖默认压缩工具(minimizer)

        const TerserPlugin = require('terser-webpack-plugin');        

            module.exports = {

              optimization: {

                minimizer: [

                  new TerserPlugin({  // 压缩js

                    cache: true,

                    parallel: true,  // 开启多进程,提升压缩速度

                    sourceMap: true,  // 生成map文件

                  }),

                  new OptimizeCSSAssetsPlugin({}),    // 压缩css

                ],

              }

          };

    3、optimization.splitChunks:object

        对于动态导入模块,默认使用 webpack v4+ 提供的全新的通用分块策略

webpack 4.x 配置理解_第7张图片


九、性能(performance)

可以控制 webpack 如何通知「资源(asset)和入口起点超过指定文件限制」。配置如何展示性能提示。例如,如果一个资源超过 250kb,webpack 会对此输出一个警告来通知你。

    一、常用配置项

        1、performance.hints:false | "error" | "warning",此属性默认设置为 "warning"。

            ①给定一个创建后超过 250kb 的资源:hints: false

            ②不展示警告或错误提示。:hints: 'warning'

            ③将展示一条警告,通知你这是体积大的资源。在开发环境,我们推荐这样。:hints: 'error'

        2、performance.maxEntrypointSize:int

            ①此选项根据入口起点的最大体积,控制 webpack 何时生成性能提示。默认值是:250000 (bytes)。

                module.exports = {

                      performance: {

                            maxEntrypointSize: 400000

                      }

                };


十、devtool

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。切勿同时使用 devtool 选项和SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件devtool 选项在内部添加过这些插件,所以你最终将应用两次插件。

webpack 4.x 配置理解_第8张图片

你可能感兴趣的:(webpack 4.x 配置理解)