Webpack 开发和部署

启用 Source Map

在 webpack.config.js 中添加字段

devtool: 'eval-source-map',
`</pre>

这样出错后会采用 sourceMap 直接显示出错位置

### 配置 webpack-dev-server

在 webpack.config.js 中添加字段

<pre>`devServer: {
  historyApiFallback: true,
  hot: true,
  inline: true,
  progress: true,
}
`</pre>

### 使用 preLoaders 和 postLoaders

preLoaders 在 loaders 之前执行, 总体顺序是 preLoader -> loaders -> postLoaders

#### 安装 jshint

<pre>`npm install --save-dev jshint-loader
`</pre>

在 config 中配置

<pre>`module:{
  preloaders:[
    {
      test: /\.jsx$/,
      loader:'jshint-loader'
    }
  ]
}
jshint:{
  'esnext':true
}
`</pre>

### 部署上线

项目开发完成后需要部署上线, 此时应该创建一个新的 config, 因为部署上线使用的 webpack 不需要 dev-tools, dev-server, jshint 等

复制现有的 config 文件, 命名为 webpack.production.config.js, 将里面与开发有关的东西删除, 在 package.json 中添加

<pre>`"scripts":{
  "build": "webpack --progress --profile  --colors --config webpack.production.config.js"
},
`</pre>

上线的时候运行

<pre>`npm run build
`</pre>

### 分离第三方库

如果第三方库很多, 会导致最后 bundle 文件很大, 减慢加载速度, 因此需要把第三方库和 app 本身的代码分开

#### 修改 entry 入口文件

<pre>`entry:{
  app: path.resolve(APP_PATH, 'index.js'),
  //添加要打包在 vendors 里面的库
  vendors: ['jquery', [moment]]
},
`</pre>

#### 添加 CommonsChunkPlugin

<pre>`plugins: [
  //使用 uglifyJs 压缩 js 代码
  new webpack.optimize.UglifyJsPlugin({minimize: true}),
  //把入口文件里的数组打包成 vendors.js
  new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
  new HtmlWebpackPlugin({title: 'Welcome'})
]
`</pre>

运行 build 后会生成 vendor.js

### 生成多页面

假设需求是生成两个页面, 一个叫 index.html, 需要引用 app.js 和 vendors.js 两个文件; 另一个是 mobile.html, 需要应用 mobie.js 和 vendor.js 这两个文件

首先新建一个叫 mobile.js 的文件入口, 比 app.js 简单一些

<pre>`import './main.scss';
import $ from 'jquery';
import 'imports?jQuery=jQuery!./plugin.js';

$(document).ready(function(){
  let app = document.createElement('div');
  app.innerHTML = '&lt;h1&gt;Hello World&lt;/h1&gt;';
  document.body.appendChild(app);
  $('h1').greenify();
});
`</pre>

在 config 修改入口文件和输出配置

<pre>`entry:{
  // 三个入口文件: app, mobile, vendors
  app: path.resolve(APP_PATH, 'index.js'),
  mobile: path.resolve(APP_PATH, 'mobile.js'),
  vendors: ['jquery','moment']
},
output:{
   path: DIST_PATH,
   filename: '[name].js'
},
`</pre>

为 html-webpack-plugin 设置模板, 并保存于 templates

<pre>`// index.html
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;{%= o.htmlWebpackPlugin.options.title %}&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h3&gt;Welcome to Index&lt;/h3&gt;
  &lt;/body&gt;
&lt;/html&gt;

//mobile.html
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;{%= o.HtmlWebpackPlugin.options.title %}&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h3&gt;Welcome to Mobile&lt;/h3&gt;
  &lt;/body&gt;
&lt;/html&gt;
`</pre>

继续配置 config.js, 让 HtmlWebpackPlugin 可以生成多个文件

<pre>`//Templates 的文件夹路径
var TEM_PATH = path.resolve(ROOT_PATE, 'templates');
...
plugins:[
  //创建两个 HtmlWebpackPlugin 的实例, 生成两个页面
  new HtmlWebpackPlugin({
    title: 'Hello World App',
    template: path.resolve(TEM_PATH, 'index.html'),
    filename: 'index.html'
    //chunks 这个参数告诉插件要引用 chunks 中的那几个入口
    chunks: ['app','vendors'],
    //scripts 要插入的位置
    inject: 'body'
  }),
  new HtmlWebpackPlugin({
    title: 'Hello Mobile App',
    template: path.resolve(TEM_PATH, 'mobile.html'),
    filename: 'mobile.html',
    chunks: ['mobile','vendors'],
    inject: 'body'
  })
]