webpack多页运用架构系列（二）：webpack设置经常使用部份有哪些？

2024年2月14日 243次阅读 来源: array_huang

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000006863968

假如您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

媒介

webpack的设置文件是一个node.js的module，用CommonJS作风来誊写，形如：

module.exports = {
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}

webpack的设置文件并没有牢固的定名，也没有牢固的途径请求，假如你直接用webpack来实行编译，那末webpack默许读取的将是当前目次下的webpack.config.js

$ pwd
/d/xampp/htdocs/webpack-seed
$ webpack # webpack此时读取的现实上是/d/xampp/htdocs/webpack-seed/webpack.config.js

假如你有别的定名的须要或是你有多份设置文件，可以运用--config参数传入途径：

$ webpack --config ./webpackConfig/dev.config.js

别的，在CLI实行webpack指令时可传入的参数（固然除了--config）现实上都可以在设置文件内里直接声明，我强烈建议可以的话只管都在设置文件里写好，有须要的话写两份设置也好三份也好（横竖设置文件间也是可以相互援用的，雷同的部份就拆成一个module出来以供读取，末了拼成种种状况下须要的设置就好了）。

进口文件设置：entry参数

entry可以是字符串（单进口），可以是数组（多进口），但为了后续生长，请务必运用object，因为object中的key在webpack里相称于此进口的name，既可今后续用来拼天生文件的途径，也可以用来作为此进口的唯一标识。
我引荐的情势是如许的：

entry: { // pagesDir是前面准备好的进口文件鸠合目次的途径
  'alert/index': path.resolve(pagesDir, `./alert/index/page`), 
  'index/login': path.resolve(pagesDir, `./index/login/page`), 
  'index/index': path.resolve(pagesDir, `./index/index/page`),
},

对比我的脚手架项目webpack-seed的文件目次构造，就很清晰了：

├─src # 当前项目的源码
    ├─pages # 各个页面独占的部份，如进口文件、只需该页面运用到的css、模板文件等
    │  ├─alert # 营业模块
    │  │  └─index # 详细页面
    │  ├─index # 营业模块
    │  │  ├─index # 详细页面
    │  │  └─login # 详细页面

因为每一个进口文件都相称于entry里的一项，因而如许一项一项地来写实在是有点烦琐，我就轻微写了点代码来拼接这entry：

  var pageArr = [
    'index/login',
    'index/index',
    'alert/index',
  ];
  var configEntry = {};
  pageArr.forEach((page) => {
    configEntry[page] = path.resolve(pagesDir, page + '/page');
  });

输出文件：output参数

output参数通知webpack以什么体式格局来天生/输出文件，值得注重的是，与entry差别，output相称于一套划定规矩，一切的进口都必需运用这一套划定规矩，不能针对某一个特定的进口来制订output划定规矩。output参数里有这几个子参数是比较经常使用的：path、publicPath、filename、chunkFilename，这里先给个webpack-seed中的示例：

    output: {
      path: buildDir, // var buildDir = path.resolve(__dirname, './build');
      publicPath: '../../../../build/',
      filename: '[name]/entry.js',    // [name]示意entry每一项中的key，用以批量指定天生后文件的称号
      chunkFilename: '[id].bundle.js',
    },

path

path参数示意天生文件的根目次，须要传入一个绝对途径。path参数和背面的filename参数配合构成进口文件的完全途径。

publicPath

publicPath参数示意的是一个URL途径（指向天生文件的根目次），用于天生css/js/图片/字体文件等资本的途径，以确保网页能正确地加载到这些资本。
publicPath参数跟path参数的区别是：path参数现实上是针对当地文件体系的，而publicPath则针对的是浏览器；因而，publicPath既可以是一个相对途径，如示例中的'../../../../build/'，也可以是一个绝对途径如http://www.xxxxx.com/。平常来讲，我照样更引荐相对途径的写法，如许的话团体迁徙起来异常轻易。那什么时刻用绝对途径呢？实在也很简朴，当你的html文件跟别的资本放在差别的域名下的时刻，就应该用绝对途径了，这类状况异常多见于后端衬着模板的场景。

filename

filename属性示意的是怎样定名天生出来的进口文件，划定规矩有以下三种：

  • [name]，指代进口文件的name，也就是上面提到的entry参数的key，因而，我们可以在name里运用/，即可到达掌握文件目次构造的效果。
  • [hash]，指代本次编译的一个hash版本，值得注重的是，只如果在统一次编译过程当中天生的文件，这个[hash]的值就是一样的；在缓存的层面来讲，相称于一次全量的替代。
  • [chunkhash]，指代的是当前chunk的一个hash版本，也就是说，在统一次编译中，每一个chunk的hash都是不一样的；而在两次编译中，假如某个chunk基本没有发生变化，那末该chunk的hash也就不会发生变化。这在缓存的层面上来讲，就是把缓存的粒度邃密到详细某个chunk，只需chunk稳定，该chunk的浏览器缓存就可以继承运用。

下面来讲说怎样运用filename参数和path参数来设想进口文件的目次构造，如示例中的path: buildDir, // var buildDir = path.resolve(__dirname, './build');和filename: '[name]/entry.js'，那末关于key为’index/login’的进口文件，天生出来的途径就是build/index/login/entry.js了，怎样，是否是很简朴呢？

chunkFilename

chunkFilename参数与filename参数相似，都是用来定义天生文件的定名体式格局的，只不过，chunkFilename参数指定的是除进口文件外的chunk（这些chunk通常是因为webpack对代码的优化所构成的，比方因应现实运转的状况来异步加载）的定名。

种种Loader设置：module参数

webpack的中心现实上也只能针对js举行打包，那webpack一向号称可以打包任何资本是怎样一回事呢？本来，webpack具有一个相似于插件的机制，名为Loader，经由过程Loader，webpack可以针对每一种特定的资本做出响应的处置惩罚。Loader的品种相称多，有些比较基本的是官方自身开辟，而别的则是由webpack社区开源孝敬出来的，这里是Loader的List：list of loaders。
而module恰是设置什么资本运用哪一个Loader的参数（因为就算是统一种资本，也能够有差别的Loader可以运用，固然差别Loader处置惩罚的手腕不一样，末了效果也天然就不一样了）。module参数有几个子参数，然则最经常使用的天然照样loaders子参数，这里也仅对loaders子参数举行引见。

loaders参数

loaders参数又有几个子参数，先给出一个官方示例：

module.loaders: [
  {
    // "test" is commonly used to match the file extension
    test: /\.jsx$/,

    // "include" is commonly used to match the directories
    include: [
      path.resolve(__dirname, "app/src"),
      path.resolve(__dirname, "app/test")
    ],

    // "exclude" should be used to exclude exceptions
    // try to prefer "include" when possible

    // the "loader"
    loader: "babel-loader"
  }
]

下面一一对这些子参数举行申明：

  • test参数用来指导当前设置项针对哪些资本，该值应是一个前提值(condition)。
  • exclude参数用来剔撤除须要疏忽的资本，该值应是一个前提值(condition)。
  • include参数用来示意本loader设置仅针对哪些目次/文件，该值应是一个前提值(condition)。这个参数跟test参数的效果是一样的（官方文档也是这么写的），我也不明白为嘛有俩一样划定规矩的参数，不过我们权且可以自身来分别这两者的用处：test参数用来指导文件名（包含文件后缀），而include参数则用来指导目次；注重同时运用这两者的时刻，现实上是and的关联。
  • loader/loaders参数，用来指导用哪一个/哪些loader来处置惩罚目的资本，这俩货表达的现实上是一个意义，只是写法不一样，我个人引荐用loader写成一行，多个loader间运用!支解，这类情势相似于管道的观点，又或许说是函数式编程。形如loader: 'css?!postcss!less'，可以很明显地看出，目的资本先经less-loader处置惩罚事后将效果交给postcss-loader作进一步处置惩罚，然后末了再交给css-loader。

前提值(condition)可以是一个字符串（某个资本的文件体系绝对途径），可以是一个函数（官方文档里是有这么写，但既没有示例也没有申明，我也是醉了），可以是一个正则表达式（用来婚配资本的途径，最经常使用，强烈引荐！），末了，还可以是一个数组，数组的元素可认为上述三品种型，元素之间为与关联（既必需同时满足数组里的一切前提）。须要注重的是，loader是可以接收参数的，体式格局相似于URL参数，形如’css?minimize&-autoprefixer’，详细每一个loader接收什么参数请参考loader自身的文档（平常也就只能在github里看了）。

增加分外功用：plugins参数

这plugins参数相称于一个插槽位（范例是数组），你可以先按某个plugin请求的体式格局初始化好了今后，把初始化后的实例丢到这里来。

示例代码

诸位看本系列文章，搭配我在Github上的脚手架项目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。
本文提到的一切内容，都可以在示例代码根目次下的webpack.config.js里找到对应的内容（不过能够轻微有点庞杂呢，毕竟是一个可以投入临盆环境的架构了，不过看过我后续的文章，就会以为很简朴的啦哈哈哈哈）。

附系列文章目次（同步更新）

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000006863968

假如您对本系列文章感兴趣，迎接关注定阅这里：
https://segmentfault.com/blog/array_huang

    原文作者：array_huang
    原文地址: https://segmentfault.com/a/1190000006863968
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞