【译】webpack之谜

摘要：通过中的通过选项使用方法通过通过我发现通过设置的配置项有时不起作用。当代码发生变化时，以下种方式都会重新打包，但是不会重载页面会重载整个页面若失败则加载整个页面指出了打包入口文件，支持字符串数组和对象三种形式。

【注】本文原发自此处，转载请注明出处。

本文译自【Webpack-The Confusing Parts】原文

本文已同步发表在我的博客

webpack是当前最受欢迎的模块管理器（module bundler），对于使用React开发的项目来说堪称神器。当然，对于使用其他框架，比如Angular或者Backbone等的开发者来说，webpack也是种很好的工具。

第一次配置webpack.config.js时，有很多地方使我很困惑。在使用了webpack一段时间后，我认识到正是这些地方让webpack如此强大和迷人。

一切都是模块。—— 在webpack中，不仅js文件可以作为一个模块，其他文件（css，images，html）都可以作为模块。这就是说，你可以在其他文件中加载这些模块，require("myJSfile.js")，或者require("myCSSfile.css")。这意味着我们将任意文件拆分成便于管理的小文件，然后通过在其他文件中加载这些小文件来达到重复利用的目的。

按需加载（Load only "what" you need and "when" you need）—— 一般情况下打包工具会将我们所有的模块打包生成一个最终的文件bundle.js。但是在实际应用中，bundle.js通常会很大（10M~15M），需要很长时间才能加载完成。webpack提供了多种code splitting的方法，会生成过个打包后的文件，且支持按需加载。这样我们只有在需要用到某个模块的时候才会异步加载该模块。

现在我们来看下这些令人困惑的部分。

首先要明确的一点是，webpack有很多特性，有些只在开发环境使用，还有些只在生产环境使用，当然还有在生产环境和开发环境都可以使用的。如下图所示：

所以通常我们会有两个config文件，以针对开发环境和生产环境作不同配置。

在package.json做如下配置：

"scripts": {
  //npm run build to build production bundles
  "build": "webpack --config webpack.config.prod.js",
  //npm run dev to generate development bundles and run dev. server
  "dev": "webpack-dev-server"
 }

需要知道webpack提供了两个接口

webpack命令行工具(webpack CLI tool) —— 默认使用这种方式，无需多带带安装，被集成在webpack中。

webpack-dev-server —— node.js 服务器，需要多带带安装

可以通过命令行添加参数，也可以通过配置文件（默认为webpack.config.js），webpack打包时会读取这些配置。

最初学习webpack时你可能用的就是命令行方式，之后大部分使用命令行的场景为生产环境打包。

使用方法

方法 1: 
//全局安装
npm install webpack --g
//在命令行使用
$ webpack //<--Generates bundle using webpack.config.js

方法 2 :
//本地安装并保存在package.json中
npm install webpack --save
//在scripts中添加
"scripts": {
 "build": "webpack --config webpack.config.prod.js -p",
 ...
 }
//按以下方式运行
"npm run build"

webpack-dev-server是一个基于Express的node服务器，默认使用8080端口。这个方式的优点是它提供了浏览器热加载（Hot Module Replacement）。
使用方法

方法一：
//全局安装
npm install webpack-dev-server -g
//在命令行使用
$ webpack-dev-server --inline --hot

方法二：
//添加到package.json中
"script": {
     "start": "webpack-dev-server --inline --hot",
     ...
}
//在命令行使用
$ npm start

在浏览器中打开
http://localhost:8080/

需要注意的一点是，像inline和hot这些选项，只有webpack-dev-server有；而另一些比如hide-modules是多带带为webpack命令行方式提供的选项。

为webpack-dev-server提供参数有两种方式。

通过webpack.config.js中的devServer

通过CLI选项

使用方法

//通过CLI
$ webpack-dev-server --hot --inline

//通过webpack.config.js
devServer: {
    inline: true,
    hot: true
}

我发现通过devServer设置的配置项（hot: true, inline: true）有时不起作用。所以我更喜欢使用CLI的方式，在package.json中添加如下代码：

package.json
{
    "script": {
        "start": "webpack-dev-server --hot --inline"
    }
}

注意不要同时设置devServer中hot: true和CLI中--hot

inline模式会触发页面的动态重载（live reloading）；hot模式会触发页面的热加载（hot Module Replacement）,这种模式只重载页面中变化了的部分。如果同时设置了inline和hot，webpack-dev-server会先尝试HMR，如果HMR失败了，则重载整个页面。

//当代码发生变化时，以下3种方式都会重新打包，但是：

//1. 不会重载页面
$ webpack-dev-server

//2. 会重载整个页面
$ webpack-dev-server --inline

//3. HMR, 若失败则加载整个页面
$ webpack-dev-server --inline --hot

entry指出了打包入口文件，支持字符串,数组和对象三种形式。这三种形式有何区别呢？

如果为单一入口文件，也就是说入口文件只有一个，那这三种方式会得到相同的结果。

若有多个入口文件，且彼此独立，那么可以使用数组方式。比如入口文件为a.js，b.js，使用数组方式会将b.js的内容追加到bundle.js的内容后。
一个很常见的场景就是在html文件加入统计代码，比如googleAnalytics.js，就可以用数组的方式告知webpack将其打包到bundle.js末尾，如下：

这种方式主要针对多页面应用（指包含多个html文件）。这种方式可以使webpack根据这个对象一次就打包出多个文件。
如下这种配置可以打包出两个js文件：indexEntry.js和profileEntry.js，可以分别在index.html和profile.html中引入。

{
    entry: {
        "indexEntry": "./public/src/index.js",
        "profileEntry": "./public/src/profile.js"
    },
    output: {
        path: "/dist",
        filename: "[name].js"  //indexEntry.js & profileEntry.js
    }
}

使用方法

//profile.html


//index.html

注： output中name对应的是entry中的属性名。

可以在object内部再使用array方式。比如如下配置：

{
    entry: {
        "vendor": ["jquery", "analytics.js", "optimizely.js"],
        "index": "./public/src/index.js",
        "profile": "./public/src/profile.js"
    },
    
    output: {
        path: "/dist",
        filename: "[name].js"  //vendor.js, index.js & profile.js
    }
}

output设定了打包生成文件的路径。它有两个属性path和publicPath。
path告知webpack将打包生成后的文件存储于什么路径，比如我们希望将文件打包到dist文件夹下，只需设置path为/dist即可；publicPath用于在生产环境打包时更新文件（包括css、html）中的url。
如下配置：

//开发环境config
entry: __dirname + "/app/main.js",

output: {
    path: __dirname + "/public",
    
    //开发环境中不需要使用publicPath, 除非你的静态资源比如图片等没有存储在本地开发环境。
    //publicPath: "http://mycdn.com",
    filename: "bundle.js"
}

//生产环境config
entry: __dirname + "/app/main.js",

output: {
    path: __dirname + "/public",
    
    //publicPath: 一些插件（url-loader, file-loader, HtmlWebpackPlugin等)
    //在生成图片，样式表等的url路径时会用到该配置
    //比如：
    //.image {
    //    background-image: url("./test/png");
    //}
    //按如下配置打包后会变成：
    //.image {
    //    background-image: url("http://mycdn.com/test.png");
    //}
    publicPath: "http://mycdn.com/",
    filename: "bundle.js"
}

举个例子，在你的css文件中，用到了./test.png这个url去加载本地的图片。但是在生产环境中，这张图片test.png会存储在cdn服务器上。这样如果还是用./test.png就会访问不到该图片，必须把文件中所有的url手动改成cdn的路径才能在生产环境使用。

webpack为我们提供的publicPath这个属性使我们可以很方便地处理这类问题。只需要将publicPath设置为生产环境的路径，这些识别publicPath的插件，比如url-loader,就会自动为我们处理好url。如下图所示：

//开发环境，server和image都在本地
.image {
    background-image: url("./test.png");
}

//生产环境, server在HeroKu服务器上，而image在cdn上
.image {
    background-image: url("https://someCDN/test.png");
}

（译者注： publicPath还用于指定在使用webpack-dev-server时，如何访问其暂存于内存中的打包后的文件。）

加载器是一些node模块，可以加载（load）或者引入（import）各种类型的文件使其转化成浏览器支持的文件格式，包括js,css等等。
比如：可以使用babel-loader将使用ES6写的js文件转换为浏览器支持的ES5格式。如下：

module {
    loaders: [
        {
            test: /.js$/,  //检测js文件，如果是，则对其使用loader处理
            exclude: /node_modules/,  //不对node_modules下文件处理
            loader: "babel"   //使用babel (对babel-loader的简写)
        }
    ]
}

对同一种类型的文件可以链式运用多个加载器。链式调用为从右向左，通过!分割加载器。
举例：我们有一个css文件myCSSFile.css，我们想将这个文件中的内容转换成的形式插入到我们的html页面中。可以使用两个加载器css-loader和style-loader来达成以上目的：

modules: {
    loaders: [
        {
            test: /.css$/,
            loader: "style!css"  //style-loader!css-loader的简写
        }
    ]
}

如下展示了其原理：

1、webpack查找模块中依赖的css文件。也就是说，webpack会检查js文件中是否引用了myCSSFile.css。如果找到了依赖，webpack会先用css-loader对其进行处理。
2、css-loader会加载所有的css和这个css的依赖（比如@import otherCSS），并将css的内容处理为JSON数据格式。然后将结果传给style-loader进行处理。
3、style-loader会对接收到的json数据进行处理，并将其处理为style标签——，然后插入到html页面中。

可以向loaders传递各种参数进行配置。
在以下这个例子中，我们对url-loader进行了配置：小于1024字节的图片将会被转为为base64格式，而大于1024字节的图片还是使用图片url。有两种方式进行配置：

//方式1 使用"?"
{
    test: /.png$/,
    loader: "url-loader?limit=1024"
}

//方式2 使用"query"属性
{
    test: /.png$/,
    loader: "url-loader",
    query: {limit: 1024}
}

使用babel-loader的话，需要配置presets才能正确转化，包括将es6转换为es5，将JSX转为js。可以通过如下方式设置参数

module: {
    loaders: [
        {
            test: /.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: "babel",
            query: {
                presets: ["react", "es2015"]
            }
        }
    ]
}

但是在很多项目中babel的配置可能会比较大，所以可以多带带在babel的配置文件.babelrc中配置。如果有.babelrc，babel-loader会自动加载该文件。
如下：

//webpack.config.js
module: {
    loaders: [
        {
            test: /.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: "babel"
        }
    ]
}

//.babelrc
{
    "presets": ["react", "es2015"]
}

插件是一些node模块，可以对生成的打包文件进行处理。
比如，uglifyJSPlugin插件可以对打包后得到的bundle.js进行压缩处理，减小文件体积。
extract-text-webpack-plugin运用了css-loader和style-loader将所有的css统一处理并根据结果生成一个多带带的css文件（style.css），将文件链接插入到html文件中。

//webpack.config.js
//获取所有的css文件，并将其内容整合，生成一个多带带的css文件"style.css"
var ETP = require("extract-text-webpack-plugin");

module: {
    loaders: [
        {
            test: /.css$/,
            loader: ETP.extract("style-loader", "css-loader")
        }
    ]
},

plugins: [
    new ExtractTextPlugin("style.css")
]

注：
如果你只是想使用内联css样式，在html页面中加入style标签，可以只用css和style加载器。如下：

module: {
    loaders: [
        {
            test: /.css$/,
            loader: "style!css"
        }
    ]
}

可以看到，加载器作用于多带带的文件，在bundle生成之前完成；
插件作用于bundle或chunk，通常是在bundle生成过程的最后进行。一些插件比如commonsChunksPlugins甚至会影响bundle如何生成。（译者注:该插件用于提取出各个模块中引用的相同模块，下篇文章code splitting中会详细说明）

很多webpack配置文件中都包含一个resolve extensions的属性，其中包含一个空字符串。这个空字符串就是用于正确加载不含后缀的文件的。比如：require("./myJSFile") 或 import myJSFile from "./myJSFile" 。

{
    resolve: {
        extensions: ["", ".js", ".jsx"]
    }
}

注： 翻译水平有限，如有问题还希望大家能不吝赐教，希望和大家共同进步。

(本文完）