webpack基础——常用配置解析

系列：
webpack入门——了解及使用
webpack进阶——缓存与独立打包

文件目录：

-- /node_modules：依赖的各种模块
-- /src
– index.js
– print.js
– style.css
– package.json：配置npm相关设置
– webpack.config.js：配置webpack
package.json脚本（输入npm run xxx，xxx为脚本中对应命令，将会在命令行中执行相应操作）:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",   // webpack打包
  "watch": "webpack --watch",  // webpack监听模式
  "start": "webpack-dev-server --open" // 自动刷新
}

webpack.config.js:
（这是一个我们已经配置好的webpack配置js，本文中的讲解都将基于该文件，会在本文件上多多少少做一些改变以供测试。）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
 
module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      minChunks: Infinity,
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ]

HtmlWebpackPlugin

由webpack.config.js可知，webpack打包后生成的是若干个js文件，但是最终这些js文件都是应用在html中的。
假如打包后的文件只有app.js，那么完全可以手动创建一个html，并加入

更多配置：HTML Webpack Plugin

CleanWebpackPlugin

该插件的主要作用是清除前次打包文件。
没有hash时，这个插件体现不出来效果，我我们在以上的webpack配置中做点小的变动：

// 给输出文件名上加上hash
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  }
  
// 注释掉CleanWebpackPlugin
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      minChunks: Infinity,
    }),
    new webpack.HotModuleReplacementPlugin(),
    // new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ]

然后再次打包，可以看见dist文件夹中：

现在我们只需要hash后的文件给html使用，但是这里却任然保留着很多上一次打包留下来的东西。
这个时候我们把CleanWebpackPlugin取注释，然后再次打包。

可以看见上次文件夹里的垃圾都没有了，只留下了现在需要的文件。
故CleanWebpackPlugin的效果是在打包前，删除指定的曾经打包的文件夹，然再新建并把最新打包好的内容放在dist文件夹里。
参数为文件夹字符串数组，更多配置： Clean Webpack Plugin

webpack-dev-server

webpack有一个功能叫做监听，使用方法：命令行中输入 webpack --watch。
这样启动webpack之后，每当我们在源文件中发生了改变，都会进行重新打包，这样提高了生产效率，虽然重新打包了，但是我们必须刷新页面才能看见更变。
这样是不友好的，如果能够自己刷新页面那就极好了，这也就是webpack-dev-server的作用，启动一个小型server达到实时刷新的效果。
使用方法：

sudo npm install webpack-dev-server --save-dev
## 然后启动的时候，就
webpack-dev-server --open
## 运行参数可以用以下查看
webpack-dev-server -help
## 常用的有 编译刷新的时候出现颜色和进程条
webpack-dev-server --progress --colors

我们将该脚本写入了package.json中，可以快捷启动 npm run start。

Hot Module Replace

热替换常常和webpack-dev-server同时使用，所谓热替换（HMR: Hot Module Replace）描述的是运行中的一个系统，我要更换其中部分内容，而仍然要保持不替换的内容继续工作，并在替换后，替换部分能够立即生效。
可能到这里大家还不是很明白热替换的具体作用，简单来说就是部分刷新。
假如我们仅仅只使用webpack-dev-server，然后在index.js 引入了 style.css。 那么我们修改一下style.css的样式，webpack-dev-server会监听到源文件发生了变化，然后重新进行webpack打包，然后再刷新页面，可能到这里已经满足了很多人的需求。但是我现在有了一个新的需求，我页面上有一个input，我在input中输入了一系列文字，现在我希望，我更改了样式，input中的文字仍然保持不变，只有修改的样式发生改变。我们知道webpack-dev-server在源文件发生改变后，会刷新整个页面，一旦刷新的整个页面，那么input中的文字必当消失。 这个时候就是体现热替换强大功能的时候了，使用了热替换，就可以仅仅只更改样式而保持input中的值不发生改变。

使用方法：

• 在命令行中直接使用：

webpack-dev-server --hot

• 将启动配置写入webpack.config.js中，首先在插件数组中添加该插件：

plugins: [
  new webpack.HashedModuleIdsPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: "common",
    minChunks: Infinity,
  }),
  new webpack.HotModuleReplacementPlugin(),  // 在实例webpack.config.js中已添加
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
    title: 'Output Management'
  })
]

这之后我们将进行webpack-dev-server的配置，

devServer: {
  hot: true,  // hot为true则代表启动了热替换服务
  contentBase: path.resolve(__dirname, 'dist'),
  publicPath: '/'
},

进行配置之后，我们直接启动npm run start脚本既可（webpack-dev-server --open）。
由本例我们知道了devServer是关于webpack-dev-server的配置，我们来看看常用参数：

• port：8080（Number，访问端口），从localhost:8080访问服务器
• hot：是否开启热替换模式
• contentBase：简单来说就是提供静态资源文件的目录，如果我们没有使用HtmlWebpackPlugin的，而是手动的添加了index.html，那么这个时候index.html在哪个目录下，contentBase就需要写哪个目录。这里一定要写绝对路径。因为这个路径是基于本机的，如果写相对路径则是相对于本机的根路径的。
• publicPath：开发模式中，打包的文件在该目录下，而不是在output中制定的文件夹下。并且路径是相对于当前目录的，以'/'开头。例如：publicPath: '/public/'，则应该通localhost:8080/public/来访问打包的文件，例如我要访问common.js，那么就是localhost:8080/public/common.js。使用该路径时，通常都不会自己手写index.html，这样会造成访问混乱，直接使用HtmlWebpackPlugin生成HTML。
  更多配置：Webpack Dev Server

source map

首先我们先在本例的webpack配置上做出一些修改：
// devtool: 'inline-source-map' // 注释掉source-map
之后我们运行npm run start，这个时候我们的项目应该正常进入了开发模式中。进入print.js文件：

import _ from 'lodash';
 
export default function printMe() {
  console.log(_.join(['qq', 'bb'], ' '));
}

这个时候我们把console改成consol然后保存，在页面上触发这个printMe函数，发现控制台上：

我们知道错误明明出现在print.js中，但是由于是app.js引用了print.js，所以报错还是在app.js上，这样以后我们出现了错误很难定位出错的位置，导致难以调试，现在我们吧
// devtool: 'inline-source-map'解注，然后重新执行npm run start。再次触发printMe这个函数：

然后我们可以看见，清楚的定位了出错的是在print.js第四行，这就是source map的作用，用于错误定位。但是在生产环境中，我们一般都是经过调试好的文件，所以在生产环境中不需要这个source map。
相关信息查看： 开发辅助调试工具(Devtool)

参考资料：
开发中 Server
Webpack dev server
webpack-dev-server 使用总结
Webpack使用教程三（webpack-dev-server）

本文将持续更新。。。。