tofacebook.com -专业IT技术社区 webpack-webpackConfig-plugin 配置 Web程序【tofacebook.com】 - tofacebook.com-专业IT技术社区
37°

webpack-webpackConfig-plugin 配置 Web程序【tofacebook.com】

标签:path   value   boot   还需要   window   目录   comm   blog   sch   

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,
}),
  • 作用:

抽取出所有通用的部分,参数:

  1. name: ‘commons/commons‘ : 给这个包含公共代码的chunk命个名(唯一标识)
  2. chunks: 表示需要在哪些chunk(也可以理解为webpack配置中entry的每一项)里寻找公共代码进行打包。不设置此参数则默认提取范围为所有的chunk
  3. filename: ‘[name]/bundle.js‘ :如何命名打包后生产的js文件,也是可以用上[name]、[hash]、[chunkhash]这些变量的,  例子就是‘commons/commons/bundle.js‘了 (最终生成文件的路径是根据webpack配置中的ouput.path和上面CommonsChunkPlugin的filename参数来拼的
  4. 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,参数:

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

 

webpack-webpackConfig-plugin 配置

标签:path   value   boot   还需要   window   目录   comm   blog   sch   

原文地址:http://www.cnblogs.com/vs1435/p/7243719.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: