webpack-webpackConfig-plugin 配置

最新推荐文章于 2024-04-19 15:47:21 发布

转载最新推荐文章于 2024-04-19 15:47:21 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog_hjj0jic0h02j.html

前端专栏收录该内容

844 篇文章

订阅专栏

本文深入解析Webpack的四大核心插件：ProvidePlugin、CommonsChunkPlugin、ExtractTextPlugin及HtmlWebpackPlugin的功能与用法，帮助开发者掌握提升项目构建效率的关键技巧。

ProvidePlugin

语法：

module.export = {
    plugins: [
         new webpack.ProvidePlugin({
             $: 'jquery',
             jQuery: 'jquery',
             'window.jQuery': 'jquery',
             'window.$': 'jquery',
        }),
    ]
}

作用：

rovidePlugin的机制是：当webpack加载到某个js模块里，出现了未定义且名称符合（字符串完全匹配）配置中key的变量时，会自动require配置中value所指定的js模块

使用ProvidePlugin还有个好处，就是，你自己写的代码里，再！也！不！用！require！jQuery！啦！

延伸：

{
　　test: require.resolve('jquery'), // 此loader配置项的目标是NPM中的jquery
　　loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
},

有了ProvidePlugin为嘛还需要expose-loader？

如果你所有的jQuery插件都是用webpack来加载的话，的确用ProvidePlugin就足够了；

不过总有那么些需求是只能用<script>来加载的

webpack.optimize.CommonsChunkPlugin

语法：

new webpack.optimize.CommonsChunkPlugin({
    name: 'commons/commons',      
    filename: '[name]/bundle.js',
    minChunks: 4,
}),

作用：

抽取出所有通用的部分，参数：

name: 'commons/commons' ：给这个包含公共代码的chunk命个名（唯一标识）
chunks：表示需要在哪些chunk（也可以理解为webpack配置中entry的每一项）里寻找公共代码进行打包。不设置此参数则默认提取范围为所有的chunk
filename: '[name]/bundle.js' ：如何命名打包后生产的js文件，也是可以用上[name]、[hash]、[chunkhash]这些变量的, 例子就是'commons/commons/bundle.js'了（最终生成文件的路径是根据webpack配置中的ouput.path和上面CommonsChunkPlugin的filename参数来拼的）
minChunks: 4, ：公共代码的判断标准：某个js模块被多少个chunk加载了才算是公共代码

ExtractTextPlugin

语法：

new ExtractTextPlugin('[name]/styles.css'),

作用：

抽取出chunk的css ，

ExtractTextPlugin的初始化参数不多，唯一的必填项是filename参数，也就是如何来命名生成的CSS文件。跟webpack配置里的output.filename参数类似，这ExtractTextPlugin的filename参数也允许使用变量，包括[id]、[name]和[contenthash]；理论上来说如果只有一个chunk，那么不用这些变量，写死一个文件名也是可以的，但由于我们要做的是多页应用，必然存在多个chunk（至少每个entry都对应一个chunk啦）

在这里配置的[name]对应的是chunk的name，在webpack配置中把各个entry的name都按index/index、index/login这样的形式来设置了，那么最后css的路径就会像这样：build/index/index/styles.css，跟chunk的js文件放一块了（js文件的路径形如build/index/index/entry.js）

备注：还要在css-loader , less-loader , postcss-loader 等关于样式的loader 配置里做相应的修改

{
　　test: /\.css$/,
　　include: /bootstrap/,
　　use: ExtractTextPlugin.extract([{
　　　　loader: 'css-loader',
　　}]),
}

HtmlWebpackPlugin

语法：

var glob = require('glob');
var path = require('path');
var options = {
  cwd: './src/pages', // 在pages目录里找
  sync: true, // 这里不能异步，只能同步
};
var globInstance = new glob.Glob('!(_)*/!(_)*', options); // 考虑到多个页面共用HTML等资源的情况，跳过以'_'开头的目录
var pageArr = globInstance.found; // 一个数组，形如['index/index', 'index/login', 'alert/index']
var configPlugins = [];
pageArr.forEach((page) => {
  const htmlPlugin = new HtmlWebpackPlugin({
    filename: `${page}/page.html`,
    template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),
    // 意思是加载 page 下面的js , 和加载 commons/commons 目录下的js
    chunks: [page, 'commons/commons'],
    hash: true, // 为静态资源生成hash值
    xhtml: true,
  });
  configPlugins.push(htmlPlugin);
});

作用：

生成html，参数：

filename `${page}/page.html`, ：生成的文件名字，多页面就会有多个 HtmlWebpackPlugin ，通常使用循环生成一个数组
template ： path.resolve(dirVars.pagesDir, `./${page}/html.js`), 生成的html 基于的模板
chunks ： [ page, 'commons/commons'] : 意思是加载变量page 和 commons/commons 目录下的js
hash： true ：为静态资源生成hash值