webpack 配置简介

webpack 为何会出现

1. 随着 web 技术的发展，越来越多的网站一改传统的网页形式，进化成了 webapp 模式。

• 单页面模式开发 webapp，不同的页面资源（js，图片，css）都要通过异步的方式加载进来，对前端的开发流程及资源的组织有了更高的要求。
• 为了更好地组织项目中涉及到的各种各样的，碎片化的资源，同时解放开发人员的双手，使更多的精力投入到开发工作中来，保证整个项目的代码清晰流畅，同时能完美运行在各浏览器上，需要有一个模块化的系统，来完成除了开发以外的工作。

webpack 如何配置

如下是一个简单的webpack配置文件（一般是 webpack.config.js）。更详细的配置可以参见中文文档

const webpack = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].min.js'
    },
    module: {
        rules: [{
            test: /\.js[x]?$/,
            include: [
                path.resolve(__dirname, 'src')
            ],
            exclude: [
                path.resolve(__dirname, 'node_modules')
            ],
            loader: 'babel-loader',
            options: {
                presets: ['es2015', 'react']
            }
        }]
    },
    devtool: 'source-map',
    plugins: [
        new htmlWebpackPlugin({
            hash: true,
            template: './src/tpl.html',
            inject: 'body'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist')
    }
}

entry

项目的入口起点，这里的内容可以是字符串／字符串数组／对象。对于单页面应用可能只有一个入口文件，多页面应用可以有多个入口文件。

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

output

1. output.path
   该字段定义了输出文件的目录，所有的 bundle 文件都会输出到该目录下面。

2. output.name
   该字段定义了每个 bundle 的名称，可以包括各种各样自定义的样式。

// 只有一个输出文件，直接命名
filename: "bundle.js"
// 使用入口名
filename: "[name].bundle.js"
// 使用内部chunk id
filename: "[id].bundle.js"
// 使用每次构建中，生成的唯一 hash
filename: "[name].[hash].bundle.js"
// 使用chunk内容的hash
filename: "[chunkhash].bundle.js"

module.rules

创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。

1. test
   正则匹配模块文件
2. include
   路径白名单，该规则只会对这个目录下的文件起作用（这里可以用数组）
3. exclude
   路径黑名单
4. loader
   加载器
5. options
   loader 的附加参数

plugins

webpack 插件。上面代码中的插件（htmlWebpackPlugin）是一个读取 html 模版的插件，它可以自动生成 index.html 文件，同时正确添加打包完成的 js 文件。
下面是一个具有多个插件的配置例子

var webpack = require('webpack')
// 导入非 webpack 默认自带插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
// 在配置中添加插件
plugins: [
  // 构建优化插件
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor-[hash].min.js',
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_console: false,
    }
  }),
  new ExtractTextPlugin({
    filename: 'build.min.css',
    allChunks: true,
  }),
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // 编译时(compile time)插件
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server 强化插件
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]