“scripts”: {

  //npm run build 生产模式打包

  “build”: “webpack --config webpack.config.prod.js”,

  //npm run dev 开发模式打包并且运行dev-server

  “dev”: “webpack-dev-server”

 }

2.Webpack CLI VS webpack-dev-server

需要强调的一点是Webpack这个模块打包器提供了两个接口：

1. Webpack CLI工具-默认接口（作为Webpack的一部分自动安装）。
2. webpack-dev-server工具-一个Node.js服务器（需要单独安装）。

Webpack CLI(适用于生产模式的构建)

此工具可以通过CLI或者配置文件（默认值：webpack.config.js）获取配置并传递给Webpack进行打包。

初学Webpack的时候可以使用CLI，大部分可能只会用来进行生产模式的构建。

用法：

//用法1:

//全局安装

npm install webpack-dev-server --g

//在终端中运行

$ webpack-dev-server --inline --hot

//用法2:

//写到package.json的脚本里

“scripts”: {

 “start”: “webpack-dev-server --inline --hot”,

 ...

 }

//运行脚本

$ npm start

//打开浏览器

http://localhost:8080

//通过 CLI

webpack-dev-server --hot --inline

//通过 webpack.config.js

devServer: {

 inline: true,

 hot:true

}

//package.json

{

  scripts:

   {“start”: “webpack-dev-server --hot --inline”}

}

//当源码改变时，下面三种命令都会导致重新打包，但是

//1. 不会重载浏览器中的页面

$ webpack-dev-server

//2. 会重载整个页面

$ webpack-dev-server --inline

//3. reloads just the module(HMR), or the entire page if HMR fails

//3. 重载改变的模块（HMR），如果HMR失败的话就重载整个页面

$ webpack-dev-server  --inline --hot

//profile.html

<script src=”dist/profileEntry.js”></script>

//index.html

<script src=”dist/indexEntry.js”></script>

4.output — "path" Vs "publicPath"

output的作用是告诉Webpack如何存储生成的结果文件，其中path和publicPath这两个属性可能会让人困惑。

path仅仅用来告诉Webpack在哪里存放结果文件，而publicPath被一些Webpack插件用来处理CSS，HTML文件中的URL，一般用于生产模式。

例如，CSS里，可能会用./test.png这样的url来加载本地图片，但是在生产模式中，"test.png"这种图片可能是放在CDN上的，服务器是跑在云平台上的。这就意味着，生产模式中，你不得不手动处理文件里的URL保证它们指向的是CDN地址。

现在，你可以用Webpack的publicPath和一些具有publicPath检测功能的插件来自动处理文件中的URL。

// 开发模式：服务器和图片都在本地

.image {

  background-image: url(‘./test.png’);

 }

// 生产模式：服务器跑在云平台上，图片在CDN上

.image {

  background-image: url(‘https://someCDN/test.png’);

 }

Loader 和 Loader链

Loader是用来加载（load）或输入（import）文件的Node模块，不同的loader可以将各种类型的文件转换为浏览器能够接受的格式如JS，Stylesheets等等。更进一步来说，loader允许通过require或ES6的import语句在JS文件中引入各种文件。

例如，可以用babel-loader把ES6语法写的JS转换成浏览器能够兼容的ES5形式：

module: {

 loaders: [{

  test: /\.js$/, ←检测".js"文件, 通过的话，则使用对应loader

  exclude: /node_modules/, ←排除 node_modules 文件夹

  loader: ‘babel’ ←使用 babel (‘babel-loader’的简写形式)

 }]

Loader链（从右向左工作）

多个loader可以链式调用，作用于同一种文件类型。工作链的调用顺序是从右向左，各个loader之间使用"!"分开。

例如，有一个CSS文件myCSSFile.css，我们想把文件里的内容放到HTML文件的标签中。想实现这一点，需要用到两个loader：css-loader和style-loader。

工作流程如下图：

1. Webpack搜索模块内依赖的CSS文件，通过检查JS文件中是否有require(myCSSFile.css)语句。如果找到了这个依赖文件，Webpack首先把文件传给css-loader。
2. css-loader载入所有的CSS语句，和CSS文件内的依赖（例如@import otherCSS），处理为JSON，接着Webpack会把这个JSON传给style-loader。
3. style-loader拿到这个JSON之后会把它放到一个style标签中-，然后把这个style插入index.html文件中。

6.Loader本身也是可以配置的

Loader本身也是可以配置的，传入不同的参数可以实现不同的功能。

在下面的例子中，我们配置url-loader使小于1024字节的图片使用DataURL，大于1024字节的图片使用URL。如下图，有两种方式传入limit参数来实现此功能。

7. .babelrc文件

babel-loader用presets配置将ES6转换为ES5，把React JSX解析为JS。我们可以像下面这样传入query参数来配置：

module: {

  loaders: [

    {

      test: /\.jsx?$/,

      exclude: /(node_modules|bower_components)/,

      loader: 'babel',

      query: {

        presets: ['react', 'es2015']

      }

    }

  ]

}

然而许多项目中babel的配置会很复杂，所以最好把所有的babel-loader配置写在.babelrc文件里。babel-loader会自动加载.babelrc文件如果该文件存在的话。 所以在许多例子中，你会看到下面这种写法：

//webpack.config.js

module: {

  loaders: [

    {

      test: /\.jsx?$/,

      exclude: /(node_modules|bower_components)/,

      loader: 'babel'

    }

  ]

}

//.bablerc

{

 “presets”: [“react”, “es2015”]

}

8.插件

插件是用来处理打包结果的额外模块。

例如，uglifyJSPlugin会对bundle.js进行压缩和混淆处理，可以压缩文件体积。

还有extract-text-webpack-plugin会在内部调用css-loader和style-loader把所有的CSS收集在一起，最后把结果抽取到一个单独的外部styles.css文件并且在index.html中链接styles.css。

//webpack.config.js

//收集所有的.css文件，合并其中的内容并且抽取到一个单独的"styles.css"

var ETP = require("extract-text-webpack-plugin");

module: {

 loaders: [

  {test: /\.css$/, loader:ETP.extract("style-loader","css-loader") }

  ]

},

plugins: [

    new ExtractTextPlugin("styles.css") //Extract to styles.css file

  ]

}

注意：如果想要把CSS放到HTML的style标签中，可以不使用extract-text-webpack-plugin，只要用css-loader和style-loader就可以了。就像下面这样：

 loaders: [{

  test: /\.css$/,

  loader: ‘style!css’ <--(style-loader!css-loader的简写形式)

 }]

{

 resolve: {

   extensions: [‘’, ‘.js’, ‘.jsx’]

 }

}