webpack学习

webpack简介

webpack是一种模块化方案，将JS、CSS和图片等资源都当做模块来处理。提供一个入口文件，它会把该文件以及该文件所依赖的其他模块都打包成一个文件。

在模块化这个角度，与requireJS有点相像，不同的是requireJS是AMD模式的，相当于是在浏览器中增加了一个AMD解释器，这样浏览器就可以识别require

、define

等标识，而webpack支持commonJS、AMD以及ES6，并且是预编译的，提前就转成了浏览器可以识别的语言。

此外，webpack还提供了gulp等前端构建工具的功能，例如SASS等的预处理、压缩打包等前端流程化的功能。

安装webpack就不说了，用npm非常简单，主要对配置文件进行一下解读吧，当运行命令webpack

（前提是全局安装了）后，默认就是查找该文件，当然你也可以通过webpack --config <文件名>

来运行别的配置文件。

webpack.config.js

文件使用说明

该文件中要使用commonjs风格。先将webpack引进来：

var webpack = require('webpack');

需要使用module.exports = {}

来导出具体的配置项。配置选项中通常包括以下一些内容：

context

为entry指定base directory ，需使用绝对路径，如果设置了该项，那么entry需要使用相对路径，相对于base directory：

context: __dirname + '/src',
entry: {
      main: './js/main.js',
      vendor: ['./js/a.js', './js/b.js']
},

entry

其值可以是：

• 字符串

  当只有一个入口文件

• 数组

  数组中的所有文件都会被加载，最后一个文件将被输出（其他文件都合并到该文件中），如果output

  中没有命名或采用[name]

  的形式来命名，会输出文件main.js

  。

• 对象

  采用该方式可以设置多个入口文件，这样在页面中进行相应的引用就行了。输出的文件名是entry对象中的key值。

entry: {
    main: './js/main.js',
    vendor: ['./js/a.js', './js/b.js']
}

output

配置输出文件。

filename

可以使用[name]或[hash]

或[chunkhash]作为输出文件的名字：

output: {
    filename: '[hash].js' //或'[name].js'或'[name]-[hash].js'
}

如果entry不是对象，则这里的[name]

值就是main

.注意此处的hash

值是指整体编译一次的值，而不是每个文件单独改变编译后的值，[chunkhash]

才是每个chunk自己的hash值。

path

输出文件的位置，需要是绝对路径。

publicPath

官网上是这么解释的：

The publicPath specifies the public URL address of the output files when referenced in a browser. For loaders that embed <\script> or <\link> tags or reference assets like images, publicPath is used as the href or url() to the file when it’s different than their location on disk (as specified by path). This can be helpful when you want to host some or all output files on a different domain or on a CDN. The Webpack Dev Server also uses this to determine the path where the output files are expected to be served from. As with path you can use the [hash] substitution for a better caching profile.

解释一下就是，path指的输出文件要放到磁盘中哪个位置，而publicpath是指浏览器或者webpack dev server从哪里获取一些如图片、chunks等资源。特别是当需要把输出文件放置到另一个域或者CDN上时。因此，在引用文件的时候使用相对路径，浏览器访问的时候会从publicpath开始找。

还有一些其他解释：

When executed in the browser, webpack needs to know where you’ll host the generated bundle. Thus it is able to request additional chunks (when using code splitting) or referenced files loaded via the file-loader or url-loader respectively.

No, this option is useful in the dev server, but its intention is for asynchronously loading script bundles in production. Say you have a very large single page application (for example Facebook). Facebook wouldn’t want to serve all of its javascript every time you load the homepage, so it serves only whats needed on the homepage. Then, when you go to your profile, it loads some more javascript for that page with ajax. This option tells it where on your server to load that bundle from。

大体意思就是和path的区别是，path是针对本地文件系统，而publicPath是相对于浏览器的。当要进行异步按需加载的时候，publicpath告知了从哪里进行其他的chunk的获取（以ajax方式）。

此外，还可以给path和publicpath添加[hash]

以避免缓存。??不太会用

参考：

What does “publicPath” in webpack do?

chunkFileName

定义非入口文件名，比如通过代码分割所提取出来的文件。

还有一些其他的配置项，就不一一列举了。

devtool

生成 source maps文件，对编译后的文件和源文件的对应，方便我们调试。该配置项有以下四个选项：

• source-map
• cheap-module-source-map
• eval-source-map
• cheap-module-eval-source-map

在文档入门webpack，看这篇就够了

中对该配置项的四个选项的区别有具体说明。

以上。