webpack打包流程_Webpack 入门

webpack是一个打包工具，它可以把你写的代码，合并、处理、转换成目标代码，是前端工程化的一步，不纠结它原理的情况下，仅仅掌握使用，是挺简单的一件事。因为它挺通用的，ES6的import它认，CommonJS的require它也认，啥包的引用方式 都认，挺好的。

1、核心概念

webpack有几个核心的概念，分别是：入口（Entry），模块（Module）、代码块（Chunk），模块转换器（Loader）、扩展插件（Plugin）和输出结果（Output）。

从流程上理解很简单。

webpack要给你打包，得要有个入口（Entry），这个入口里配了很多个模块（Module），在webpack里，啥都算模块，从入口的某个模块开始，分析依赖的模块，每个模块用Loader去加载，因为Loader里可能有一些转换规则，比如css的转换啥的，然后递归找完了，从这个模块开始找出来的东西合在一起算一个代码块（Chunk）因为是同一个爹关联出来的，然后webpack把一个代码块转成一个输出（Output）。Plugin就是在构建流程里面随便啥是都能插一脚的东西，所以构建着构建着，遇到要执行Plugin了，就执行。

Loader跟Plugin有点像，但是我个人感觉Loader比较有组织纪律，就是用来加载模块的，Plugin就比较乱，引进来，随便在哪个构建流程里都能玩，因为它就是在流程里注入钩子实现的。

2、安装使用

npm install webpack

npm install webpack-server

再写一个webpack的配置文件，比如：

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

运行的时候，写 webpack --config xxx配置文件.js 就行了。

3、webpack server

webpack server可以本地启一个服务，提供打包前/打包后js的本地访问，这个玩意儿跟页面可以建立websocket连接，你改点儿代码，它监听到了能自动帮你刷新页面，也可以不刷新页面，直接替换模块，打开热更新就行了。

同时，它还有source map的作用，就是你F12一打开，除了你打包后的那一堆看不懂的代码以外，还有一个名叫webpack的文件夹，里面装的是你打包前的代码，比如 vue的、React啥的，这样对调试来说就很方便了。

4、详细配置项

webpack那一堆核心概念，每个都有一堆的配置项，其实用不到那么多，简单掌握一下就行了。

4.1) 入口 Entry

入口可以配置好几个文件，要是一个呢，可以写个相对路径的string，

'../index.js'

要是俩呢，可以写个数组

['../miao.js', '../wang.js']

要是想写入口的时候就指定了生成的输出代码名呢，可以写个对象，这样就能生成output1.js和output2.js

{'output1':'../index.js', 'output2':'../xxx/index.js'}

4.2）代码块 Chunk

生成代码的默认名称是main.js，要是用对象指定了入口的值，就会跟着对象的key值生成，要是Chunk名称得要通过掉接口异步决定，也没事儿entry那边可以写异步接口调用的，跟着返回值走。

4.3) 输出 Output

a) filename：输出Output的时候得起名字，名字里可以有内置的参数，包括[name]（chunk的名字）、[id]（chunk的内置id）、[hash]（随机哈希值）、和[chunkhash]（chunk的js内容生成的哈希值）。这样可以这么写一个Output的 filename

filename:'[name].[hash].js'

这样就是Chunk名跟随机哈希值一起生成的文件。

b) path：输出文件的本地路径，需要是绝对路径，但是可以用Node的path模块自动获取当前路径（path.resolve(__dirname,'dist_[hash]')）。

c) publicPath：给资源文件自动加个公共前缀，可以用于资源后面会发布到线上，自己的HTML文件要引用线上路径的场景。

d) crossOriginLoading：webpack用异步加载的时候，配置对应script标签属性用的。

e) libraryTarget和library：用来把我们写的代码打包成一个其他开发者能引用的sdk。

4.3）模块 Module

a) 加载器 Loader：加载器有三个配置，test、include、exclude。test是讲把加载器给什么样的文件用的，就是个用来匹配文件名的正则，比如.jsx$，匹配上了就用这个Loader；include是讲在哪个路径下去找的；exclude是讲哪个路径不找的。

它们都支持string和数组，数组情况下，多个配置是或的关系。

b) noParser：可以让webpack忽略某些文件，比如jQuery源码，不进行递归解析啥的，节省打包时间。

c) parser：可以详细控制那些文件 要解析，比如amd要不要，commonjs要不要，ES6的import要不要啥的，很细致，但是我想不到什么应用场景。

4.4) 找模块的方式 Resolve

webpack会从入口模块开始找，找寻方式就是Resolve规定的。

a) alias：可以配置别名，就是某个路径下的文件，你不耐烦每次都找相对路径在哪里，就取个名字，import 后面就写这个别名，不过别名一般IDE就不能自动识别了，按下ctrl点这个别名，跳不到文件，这个有点麻烦，vs code要装个插件（jsconfig.json Reference），webstorm支持。

b) mainFields：有的时候，要为不同的环境准备不同的代码，比如不同浏览器兼容性不同，就有的要用ES6的，有的低版本只能用ES5的，如何根据环境走不同的代码呢，就需要使用mainFields了，根据这个配置，可以运行的代码。

c) extensions：导入文件有的时候忘记写后缀了，这个可以自动配后缀，比如['.js', '.jsx']这样你写import xxx，就会先找xxx.js，找不到就找xxx.jsx。

d) modules：假设你自己写了个公用组件，可以用别名引用，不想用别名，也可以把自己这个组件配成优先查找的代码库，webpack会按照顺序找这个配置下的目录，

modules:['./src/componnets', 'node_modules']

这就是先找你的库，再找node_modules里的第三方库，等于把你的components组件当成第三方库来玩了。

e) enforceExtension：强制要求每个模块引用必须写后缀。

f) enforceModuleExtension：要求node_modules里的文件必须写后缀。真严格。

4.5) 插件Plugin

插件是对于webpack来讲也是第三方引入的，这个webpack上没太多可以说的，主要是要看这个第三方插件自己的配置。

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {
  plugins: [
    // 所有页面都会用到的公共代码提取到 common 代码块中
    new CommonsChunkPlugin({
      name: 'common',
      chunks: ['a', 'b']
    }),
  ]
};

4.6) devserver

a) hot：模块热替换，发现代码改了不用刷新页面，模块自己换了。

b) inline：代码改了之后 webpack自动刷新。

c) historyApiFallback：对于单页应用，webpack可以根据请求不同返回不同的html文件。

d) contentBase：配置启server之后的文件根目录，通常是项目根目录，一般不用改。

e) headers：毕竟devserver是个服务，这个配置可以改响应头。

f) host：可以配置监听的网址，让局域网中的其它设备访问它。

g) port：配置监听的端口。

h) allowdHost：可以配置http请求的白名单host列表。

i) disableHostCheck：配DNS的，没看懂。

j) https：很简单，开不开https。

k) clientLogLevel：配置日志登记。

l) compress：用不用gzip压缩，gzip压缩比例还是挺高的。

m) open：webpack首次构建完成后是否自动打开指定的网页，openPage可以指定要打开的网页地址。

4.7) 其它配置

a) Target：可以定义webpack要打包的东西要用在哪个环境里，是Node还是浏览器，还是webworker 或者是 electron啥的。

b) Devtool：配置是不是生成Source Map方便看源码。

c) watch和watchOptions：只用webpack不用devserver默认改代码网页是不重新编译的，但是开了这个配置，改代码之后 自动重新编译。watchOptions是对代码改动的详细配置，比如间隔时间啥的。

d) Externals：告诉webpack哪些东西是外部引用，你看见了import 也当没看见，不用走打包，比如 import jQuery。

f) ResolveLoader：告诉webpack怎么找Loader，一般用于引入本地Loader。

5、多种配置场景

webpack除了可以导出文件以外，还可以转卖导出一个Function；或者导出一个Promise函数啥的；还可以同时导出Function和Promise，写个数组就行。这个感觉没啥用。

————————————————————————————————————

刚接触webpack打包、前端工程化这一块儿的时候比较怂，觉得老高端了，还能这么玩？新世界的大门啊~~~ 其实看一遍，无非就是从Module找依赖这个流程，然后webpack有一些乱七八糟的配置而已，不要怂，就是干。

PS：我看的是这本书，《深入浅出webpack》，推荐一下 ：http://webpack.wuhaolin.cn/