这篇文章我们先来简单看看 webpack 中几个的核心概念，并粗略学习一下配置文件的写法
1、mode
webpack 有两种常见的模式，一种是 development（开发模式），一种是 production（生产模式）
两种模式下都有对应的 webpack 内置优化
- 在 development 模式下，
process.env.NODE_ENV的值将被设置为development
// webpack.development.config.js module.exports = { mode: 'development' }
- 在 production 模式下，
process.env.NODE_ENV的值将被设置为production
// webpack.production.config.js module.exports = { mode: 'production' }
2、entry
entry 是 webpack 构建模块依赖图的起点
webpack 会递归地寻找这个入口文件依赖的所有模块，并根据这些依赖关系构建出一个模块依赖图
// webpack.config.js // 单个入口文件的简写语法 module.exports = { entry: './src/index.js' // entry 属性指定入口文件路径 };
我们还能指定多个入口文件（这是一种可拓展的方式）
对于每个入口文件，webpack 都会构建一个模块依赖图，这些依赖图是彼此分离、相互独立的
// webpack.config.js // 多个入口文件的对象语法 module.exports = { entry: { app: './src/app.js', vendors: './src/vendors.js' } };
3、output
output 是 webpack 打包之后输出的文件
当 webpack 对一个入口文件构建好模块依赖图后，它会将所有模块打包成一个或多个文件输出
// webpack.config.js module.exports = { entry: './src/index.js', output: { // output 属性指定打包之后的文件放在什么位置 // filename 属性指定输出文件的文件名称 filename: 'bundle.js', // path 属性指定输出目录的绝对路径 path: '/dist' } };
对于多个入口文件情况，output 也只能指定一个输出配置
此时应该使用 占位符 来确保每个文件具有唯一的名称
// webpack.config.js module.exports = { entry: { app: './src/app.js', search: './src/vendors.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } }
4、loader
loader 用于对模块的源代码进行转换
因为 webpack 只能理解 JavaScript，所以需要 loader 将其它类型的文件转化为 webpack 能够处理的有效模块
不同的 loader 完成不同的任务，下面的例子指定使用 style-loader 和 css-loader 处理 CSS 文件
// webpack.config.js module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: '/dist' }, module: { // rules 属性用于定义处理规则 // 它是一个数组，其中的每一个项是一个对象，定义一条处理规则 rules: [ { // test 属性用于标识应该处理哪些文件 // 它可以是一个正则表达式 test: /\.css$/, // use 属性用于指定应该使用哪些 loader // 它是一个数组，其中的每一个项是一个对象，指定一个 loader use: [ { // 需要安装 style-loader // npm install --save-dev style-loader loader: 'style-loader' }, { // 需要安装 css-loader // npm install --save-dev css-loader loader: 'css-loader', options: { // options 属性用于传入额外的配置 modules: true } } ] } ] } }
5、plugin
plugin 用于处理一些拓展任务，从打包优化和压缩，一直到重新定义环境中的变量
// webpack.config.js // 内置插件 const webpack = require('webpack') // 外部插件，需要通过 npm 安装 const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: '/dist' }, module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader' } ] }, plugins: [ // 由于插件可以携带参数，所以我们需要传入一个 new 实例 new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ] }
