上一节的重点是搭建环境,通过一个简单的demo,对webpack打包的基本配置有了简单的认识。
接下来将介绍一下webpack的几个核心概念,其实官网已经讲得很详尽了,这里只是简单概括一下:
1、入口(entry)
entry是打包的入口文件。
(1)单入口:字符串形式
// 简写
module.exports = {
entry: './src/index.js'
};
// 也可以写成对象形式
module.exports = {
entry: {
main: './src/index.js'
}
};
(2)多入口:对象形式
module.exports = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
2、输出(output)
output表示webpack打包后的输出。
配置output选项可以控制 webpack 如何向硬盘写入编译文件。
注意:
1、无论entry是单入口文件还是多入口文件,output的输出配置都只有一个
2、entry是单入口,output的filename可自定义
3、entry是多入口,outout的filename需要使用占位符
// filename 用于输出文件的文件名
// path 目标输出目录的绝对路径
module.exports = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
// 单入口文件
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
// 多入口文件
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
// 使用了占位符,打包后的文件是./dist/app.js和./dist/search.js
filename: '[name].js',
path: __dirname + '/dist'
}
};
3、loader
webpack本身只支持js和json两种文件类型。
loader 可以将模块的源代码转换成webpack支持的文件类型。
// test 指定匹配规则
// use 指定使用的loader名称
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
4、插件(plugins)
插件目的在于解决 loader 无法实现的其他事。
插件用于bundle文件的优化,资源管理和环境变量的注入。
作用于整个构建过程。
由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入new 实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
具体插件可以参考这里。
5、模式(mode)
mode指定当前的构建环境。
module.exports = {
mode: 'production'
};
可配置项:development、production、none
选项 | 描述 |
development | 默认会将 process.env.NODE_ENV 的值设为 deveplopment 。 启用 NamedChunksPlugin 和 NamedModulesPlugin 。 |
production | 默认会将 process.env.NODE_ENV 的值设为 production 。 启用 FlagDependencyUsagePlugin, FlagincludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin 。 |
none | 不设置 |