webpack2 基础入门详解（二）

1. 区分npm install xxx –save 与 –save -dev

开发环境与线上环境所需要的依赖包不一样，比如在npm build打包文件通过babel-loader转译es6->原生js。而在打包文件之后并不需要babel了。

–save：将依赖的模块放进package.json文件中”dependencies”中，代表线上环境还会依赖该模块。
–save-dev：将依赖的模块放进package.json文件中”devDependencies”中。

2. npm run dev一些脚本命令哪儿来的

执行webpack：webpack-dev-server –config webpack.dev.config.js – progress –colors –hot –inline

执行一次都要输入这么多代码…
其实有个捷径，直接通过package.json文件中”script”用更简单的代码替换复杂的。输入npm run dev即可执行webpack。

// package.json
"script": {
  "dev": "webpack-dev-server --config webpack.dev.config.js -- progress --colors --hot --inline"
}

脚本命令 - 参考链接：npm scripts 使用指南

3. 全局变量process.env.NODE_ENV哪里来的？作用是什么？

来源：通过webpack内置的DefinedPlugin插件。

作用：在开发环境中通常会log、warning更易于调试。而在线上的时候并不需要这些信息，从而减少一些代码量。通过这个变量，任意js文件中可以判断此时是开发环境还是线上环境。

//举个例子
const dev = process.env.NODE_ENV
if(dev === 'production'){
    console.log('...')
}

4. 后缀名自动补全 resolve.extensions

通常在react框架中可以省略js、css后缀名，是在这儿配置的。

5. 抽取入口文件中指定的文件公共代码 CommonsChunkPlugin

6. 直接转移静态文件 CopyPlugin

7. 轻量级node.js服务器 Webpack-dev-server

如果直接打开一个index.html文件，url是ftp协议开头..

可以用webpack-dev-server构建一个轻量级服务器，这样可以通过localhost:端口号访问资源。

使用命令webpack-dev-server –hot –inline还可以完成自动刷新

注：只能解决一些问题，但无法替代node服务器

8. 按需加载 require.ensure

注：要实现按需加载，必须在webpack.config.js中先定义好chunkFilename

9. 为什么有多个webpack配置文件？

在开发环境下可能我们运用的是webpack.dev.config.js，而在打包放到线上的时候，我们可能运用的是webpack.config.js。

我所了解的是…在开发的时候，可能我们会将所有文件（自己写的业务代码、第三方依赖的库等等）输出一个budle.js文件，会需要热加载。
但是放到线上等时候，我们并不需要热加载。会将自己写的业务代码与第三方依赖库分开，输出多个文件。分开输出的好处就是…自己写的代码可能需要不停的更改，但是第三方库在一段时间内是不会变的。这样有利于用户缓存。

10. 缓存优化 HashedModuleIdsPlugin

filename: ‘[name]-[chunkhash:6].js’导致业务代码和第三方库代码的chunkhash一致。这样业务代码发生变化，第三方库代码的chunkhash也会随着变化，这样起不到缓存的作用。

//解决的方法
new webpack.HashedModuleIdsPlugin(),

new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime'
}),

11. 自动引入打包文件 HtmlWebpackPlugin

在第一篇中已经讲过，但是还要补充一点。

即使chunks指定了顺序，但是它并不会根据指定的顺序来引入js文件。

解决办法：

//引入orderByList，并在chunkSortMode中执行
var orderByList = function (list) {
    return function (chunk1, chunk2) {
        var index1 = list.indexOf(chunk1.names[0]);
        var index2 = list.indexOf(chunk2.names[0]);
        if (index2 == -1 || index1 < index2) {
            return -1;
        }
        if (index1 == -1 || index1 > index2) {
            return 1;
        }
        return 0;
    };
};