Webpack全攻略，不再担忧不会配Webpack啦
以表诚意，先附上一份配置全解：css
总体配置结构
const path = require('path');
module.exports = {
// entry 表示 入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
// 类型能够是 string | object | array
entry: './app/entry', // 只有1个入口，入口只有1个文件
entry: ['./app/entry1', './app/entry2'], // 只有1个入口，入口有2个文件
entry: { // 有2个入口
a: './app/entry-a',
b: ['./app/entry-b1', './app/entry-b2']
},
// 如何输出结果：在 Webpack 通过一系列处理后，如何输出最终想要的代码。
output: {
// 输出文件存放的目录，必须是 string 类型的绝对路径。
path: path.resolve(__dirname, 'dist'),
// 输出文件的名称
filename: 'bundle.js', // 完整的名称
filename: '[name].js', // 当配置了多个 entry 时，经过名称模版为不一样的 entry 生成不一样的文件名称
filename: '[chunkhash].js', // 根据文件内容 hash 值生成文件名称，用于浏览器长时间缓存文件
// 发布到线上的全部资源的 URL 前缀，string 类型
publicPath: '/assets/', // 放到指定目录下
publicPath: '', // 放到根目录下
publicPath: 'https://cdn.example.com/', // 放到 CDN 上去
// 导出库的名称，string 类型
// 不填它时，默认输出格式是匿名的当即执行函数
library: 'MyLibrary',
// 导出库的类型，枚举类型，默认是 var
// 能够是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，
libraryTarget: 'umd',
// 是否包含有用的文件路径信息到生成的代码里去，boolean 类型
pathinfo: true,
// 附加 Chunk 的文件名称
chunkFilename: '[id].js',
chunkFilename: '[chunkhash].js',
// JSONP 异步加载资源时的回调函数名称，须要和服务端搭配使用
jsonpFunction: 'myWebpackJsonp',
// 生成的 Source Map 文件名称
sourceMapFilename: '[file].map',
// 浏览器开发者工具里显示的源码模块名称
devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
// 异步加载跨域的资源时使用的方式
crossOriginLoading: 'use-credentials',
crossOriginLoading: 'anonymous',
crossOriginLoading: false,
},
// 配置模块相关
module: {
rules: [ // 配置 Loader
{
test: /\.jsx?$/, // 正则匹配命中要使用 Loader 的文件
include: [ // 只会命中这里面的文件
path.resolve(__dirname, 'app')
],
exclude: [ // 忽略这里面的文件
path.resolve(__dirname, 'app/demo-files')
],
use: [ // 使用那些 Loader，有前后次序，从后往前执行
'style-loader', // 直接使用 Loader 的名称
{
loader: 'css-loader',
options: { // 给 html-loader 传一些参数
}
}
]
},
],
noParse: [ // 不用解析和处理的模块
/special-library\.js$/ // 用正则匹配
],
},
// 配置插件
plugins: [
],
// 配置寻找模块的规则
resolve: {
modules: [ // 寻找模块的根目录，array 类型，默认以 node_modules 为根目录
'node_modules',
path.resolve(__dirname, 'app')
],
extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名
alias: { // 模块别名配置，用于映射模块
// 把 'module' 映射 'new-module'，一样的 'module/path/file' 也会被映射成 'new-module/path/file'
'module': 'new-module',
// 使用结尾符号 $ 后，把 'only-module' 映射成 'new-module'，
// 可是不像上面的，'module/path/file' 不会被映射成 'new-module/path/file'
'only-module$': 'new-module',
},
alias: [ // alias 还支持使用数组来更详细的配置
{
name: 'module', // 老的模块
alias: 'new-module', // 新的模块
// 是不是只映射模块，若是是 true 只有 'module' 会被映射，若是是 false 'module/inner/path' 也会被映射
onlyModule: true,
}
],
symlinks: true, // 是否跟随文件软连接去搜寻模块的路径
descriptionFiles: ['package.json'], // 模块的描述文件
mainFields: ['main'], // 模块的描述文件里的描述入口的文件的字段名称
enforceExtension: false, // 是否强制导入语句必需要写明文件后缀
},
// 输出文件性能检查配置
performance: {
hints: 'warning', // 有性能问题时输出警告
hints: 'error', // 有性能问题时输出错误
hints: false, // 关闭性能检查
maxAssetSize: 200000, // 最大文件大小 (单位 bytes)
maxEntrypointSize: 400000, // 最大入口文件大小 (单位 bytes)
assetFilter: function(assetFilename) { // 过滤要检查的文件
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
devtool: 'source-map', // 配置 source-map 类型
context: __dirname, // Webpack 使用的根目录，string 类型必须是绝对路径
// 配置输出代码的运行环境
target: 'web', // 浏览器，默认
target: 'webworker', // WebWorker
target: 'node', // Node.js，使用 `require` 语句加载 Chunk 代码
target: 'async-node', // Node.js，异步加载 Chunk 代码
target: 'node-webkit', // nw.js
target: 'electron-main', // electron, 主线程
target: 'electron-renderer', // electron, 渲染线程
externals: { // 使用来自 JavaScript 运行环境提供的全局变量
jquery: 'jQuery'
},
stats: { // 控制台输出日志控制
assets: true,
colors: true,
errors: true,
errorDetails: true,
hash: true,
},
devServer: { // DevServer 相关的配置
proxy: { // 代理到后端服务接口
'/api': 'http://localhost:3000'
},
contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服务器的文件根目录
compress: true, // 是否开启 gzip 压缩
historyApiFallback: true, // 是否开发 HTML5 History API 网页
hot: true, // 是否开启模块热替换功能
https: false, // 是否开启 HTTPS 模式
},
profile: true, // 是否捕捉 Webpack 构建的性能信息，用于分析什么缘由致使构建性能不佳
cache: false, // 是否启用缓存提高构建速度
watch: true, // 是否开始
watchOptions: { // 监听模式选项
// 不监听的文件或文件夹，支持正则匹配。默认为空
ignored: /node_modules/,
// 监听到变化发生后会等300ms再去执行动做，防止文件更新太快致使从新编译频率过高
// 默认为300ms
aggregateTimeout: 300,
// 判断文件是否发生变化是不停的去询问系统指定文件有没有变化，默认每隔1000毫秒询问一次
poll: 1000
},
}
复制代码
Webpack
在Webpack里一切文件都是模块，经过Loader转换文件，经过Plugin注入钩子，最后输出由多个模块组合成的文件，Webpack专一于构建模块化项目。 这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便Webpack对模块进行组合和打包。通过Webpack处理，最终会输出浏览器能使用的静态资源。html
Webpack的优势：node
- 专一于处理模块化的项目，能作到开箱即用一步到位
- 经过Plugin扩展，完整好用又灵活
- 社区庞大活跃
Loader
const path = require('path');
module.exports = {
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 把全部依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /\.css$/,
use: ['style-loader', 'css-loader?minimize'],
}
]
}
};
复制代码
Loader能够看做具备文件转换功能的翻译员，配置里的module.rules数组配置了一组规则，告诉Webpack在遇到哪些文件时使用哪些Loaer去加载和转换。 注意：react
- use属性的值须要是一个由Loader名称组成的数组，Loader的执行顺序是由后到前的。
- 每个Loader均可以经过URL querystring的方式传入参数，例如css-loader?minimize中的minimize告诉css-loader要开启css压缩
给Loader传入属性的方式除了querystring，还能够经过配置optionsjquery
use: [
'style-loader',
{
loader: 'css-lader',
options: {
minimize: true
}
}
]
复制代码
除了在webpack.config.js文件中配置Loader，还能够在源码中指定用什么Loader去处理文件，好比webpack
require('style-loader!css-loader?minimize!./main.css')
复制代码
Plugin
Plugin是用来扩展Webpack功能的，经过在构建流程里注入钩子实现，它给Webpack带来了极大的灵活性。web
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 把全部依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 把输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /\.css$/,
use: ExtractTextPlugin.extract({
// 转换 .css 文件须要使用的 Loader
use: ['css-loader'],
}),
}
]
},
plugins: [
new ExtractTextPlugin({ //把注入到bundle.js文件的css提取到单独的文件
// 从 .js 文件中提取出来的 .css 文件的名称
filename: `[name]_[contenthash:8].css`,
}),
]
};
复制代码
Webpack经过plugins属性来配置须要使用的插件列表，plugins是一个数组，黎绵的每一项都是插件的一个实例，在实例化一个组件时能够经过构造函数传入这个组件支持的配置属性。正则表达式
DevServer
实际开发中可能会须要：json
- 提供HTTP服务而不是使用本地文件预览
- 监听文件的变化并自动刷新网页，作到实时预览
- 支持Source Map，以方便调试
DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动Webpack，并接收Webpack发出的文件变动信号，经过WebSocket协议自动刷新网页作到实时预览。后端
须要安装webpack-dev-server模块
若是尝试修改 index.html 文件并保存，你会发现这并不会触发以上机制，致使这个问题的缘由是 Webpack 在启动时会以配置里的 entry 为入口去递归解析出 entry 所依赖的文件，只有 entry 自己和依赖的文件才会被 Webpack 添加到监听列表里。 而 index.html 文件是脱离了 JavaScript 模块化系统的，因此 Webpack 不知道它的存在。
模块热更新
模块热更新能作到在不从新加载整个网页的状况下，经过将被更新过的模块替换老的模块，再从新执行一次来实现实时预览。 开启模块热更新，只要在启动DevServer时带上--hot参数便可。
支持Source Map
调试工具能够经过Source Map映射代码，实如今源代码上断点调试。 启动webpack时带上--devtool source-map参数便可。
核心概念
- Entry： 入口
- Module： 模块，一个模块对应着一个文件，Webpack会从配置的Entry开始递归找出全部依赖的模块
- Chunk： 代码块，一个Chunk由多个模块组合而成，用于代码合并与分割
- Loader： 模块转换器
- Plugin： 扩展插件
- Output： 输出结果
Webpack启动后会从Entry里配置的Module开始递归解析Entry依赖的全部Module。每找到一个Module，就会根据配置的Loader去找对应的转换规则，对Module进行转换后，再解析出当前Module依赖的Module。这些模块会以Entry为单位进行分组，一个Entry和其全部依赖的Module被分到一个组就是一个Chunk，最后Webpack会把全部Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。
配置
配置Webpack的方式：
- 只能经过命令行参数传入的选项，这种最为少见
- 只能经过配置文件配置的选项
- 经过两种方式均可以配置的选项。
Entry
entry是配置模块的入口，可抽象成输入，能够是string, array, object, 是必填项。
Webpack在寻找相对路径的文件时是以执行启动Webpack时所在的当前目录context为根目录，若是要修改该默认配置，能够：
module.exports = {
context: path.resolve(__dirname, 'app') //context必须是一个绝对路径的字符串
}
复制代码
Chunk
Webpack会为每一个生成的Chunk取一个名称
- 若是entry是一个string或array，就只会生成一个Chunk，这时Chunk的名称是main
- 若是entry是一个object，就可能生成多个Chunk，名称是object键值对里键的名称。
配置动态Entry
假如项目里有多个页面须要为每一个页面的入口配置一个Entry，但这些页面的数量可能会不断增加，则这时Entry的配置会受到其余因素的影响致使不能写成静态的值，解决方法是把Entry设置成一个函数去动态返回上面所说的配置：
// 同步函数
entry: () => {
return {
a:'./pages/a',
b:'./pages/b',
}
};
// 异步函数
entry: () => {
return new Promise((resolve)=>{
resolve({
a:'./pages/a',
b:'./pages/b',
});
});
};
复制代码
Output
output配置如何输出最终想要的代码，它是一个object。
output的配置项：
filename
配置输出文件的名称，若是有多个Chunk须要输出时，须要借助模板和变量：
filename: '[name].js'
复制代码
内置变量除了name，还有id，hash，chunkhash
path
配置输出文件存放在本地的目录，必须是string类型的绝对路径
path: path.resolve(__dirname, 'dist_[hash]')
复制代码
publicPath
在复杂的项目里可能会有构建一些资源须要异步加载，加载这些异步资源须要对应的URL地址。
举个例子，须要把构建出的资源文件上传到CDN服务上，以利于加快页面的打开速度：
filename: '[name]_[chunkhash: 8].js'
publicPath: 'https://cdn.xxx/xxx/'
复制代码
这时发布到线上的html在引入js文件时：
<script src='https://cdn.example.com/assets/a_12345678.js'></script>
复制代码
crossOriginLoading
Webpack输出的部分代码块可能须要异步架子，而异步加载是经过JSONP方式实现的，JSONP原理是动态的向html中插入一个<script src="url"></script>标签去加载异步资源。
script标签的crossorigin属性能够取如下值：
- anonymous在加载此脚本资源时不会带上用户的cookies
- use-credentials在加载此脚本资源时会带上用户的cookies
一般用设置crossorigin来获取异步加载的脚本执行时的详细错误信息。
libraryTarget和library
当用Webpack去构建一个能够被其余模块导入使用的库时须要用到它们。
- output.libraryTarget配置以何种方式导出库
- output.library配置导出库的名称
Module
配置Loader
rules配置模块的读取和解析规则
- 条件匹配： test， include， exclude
- 应用规则： 对象中的文件经过
use配置项来应用Loader - 重置顺序： 经过enforce选项可让其中一个Loader的执行顺序放到最前或最后。
module: {
rules: [
{
// 命中 JavaScript 文件
test: /\.js$/,
// 用 babel-loader 转换 JavaScript 文件
// ?cacheDirectory 表示传给 babel-loader 的参数，用于缓存 babel 编译结果加快从新编译速度
use: ['babel-loader?cacheDirectory'],
// 只命中src目录里的js文件，加快 Webpack 搜索速度
include: path.resolve(__dirname, 'src')
},
{
// 命中 SCSS 文件
test: /\.scss$/,
// 使用一组 Loader 去处理 SCSS 文件。
// 处理顺序为从后到前，即先交给 sass-loader 处理，再把结果交给 css-loader 最后再给 style-loader。
use: ['style-loader', 'css-loader', 'sass-loader'],
// 排除 node_modules 目录下的文件
exclude: path.resolve(__dirname, 'node_modules'),
},
{
// 对非文本文件采用 file-loader 加载
test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
use: ['file-loader'],
},
]
}
复制代码
在Loader须要传入不少参数时，能够经过一个Object来描述：
use: [
{
loader:'babel-loader',
options:{
cacheDirectory:true,
},
// enforce:'post' 的含义是把该 Loader 的执行顺序放到最后
// enforce 的值还能够是 pre，表明把 Loader 的执行顺序放到最前面
enforce:'post'
},
// 省略其它 Loader
]
复制代码
test, include, exclude 还支持数组：
{
test:[
/\.jsx?$/,
/\.tsx?$/
],
include:[
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'tests'),
],
exclude:[
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'bower_modules'),
]
复制代码
noParse
可让Webpack忽略对部分没采用模块化的文件的递归解析和处理，提升构建性能。
// 使用正则表达式
noParse: /jquery|chartjs/
// 使用函数，从 Webpack 3.0.0 开始支持
noParse: (content)=> {
// content 表明一个模块的文件路径
// 返回 true or false
return /jquery|chartjs/.test(content);
}
复制代码
注意被忽略掉的文件不该该包含import， require， define等模块化语句，否则会致使构建出的代码中包含没法再浏览器环境下执行的模块化语句。
parser
和noParse配置项的区别在于parser能够精确到语法层面，而noParse只能控制哪些文件不被解析。
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
parse: {
amd: false, //禁用AMD
commonjs: false, // 禁用 CommonJS
system: false, // 禁用 SystemJS
harmony: false, // 禁用 ES6 import/export
requireInclude: false, // 禁用 require.include
requireEnsure: false, // 禁用 require.ensure
requireContext: false, // 禁用 require.context
browserify: false, // 禁用 browserify
requireJs: false, // 禁用 requirejs
}
}
]
}
复制代码
Resolve
Resolve配置Webpack如何寻找模块所对应的文件。Webpack内置JS模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找。
alias
经过别名把原导入路径映射成一个新的导入路径。
resolve:{
alias: {
components: './src/components/'
}
}
复制代码
当你经过 import Button from 'components/button' 导入时，实际上被 alias 等价替换成了 import Button from './src/components/button'
alias还支持$符号来缩小范围到只命中以关键字结尾的导入语句
resolve:{
alias:{
'react$': '/path/to/react.min.js'
}
}
复制代码
mainFields
有一些第三方模块会针对不一样环境提供几份代码，该配置项决定Webpack优先采用哪份代码。
extensions
在导入语句没带文件后缀时，Webpack会自动带上后缀去尝试访问文件是否存在，默认是：
extensions: ['.js', '.json']
复制代码
modules
配置Webpack去哪些目录下寻找第三方模块，默认只会去node_modules目录下找
假如哪些被大量导入的模块都在./src/components目录下：
modules: ['./src/components', 'node_modules']
复制代码
这样你就可简单经过import 'button'导入
配置Plugin
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
plugins: [
// 全部页面都会用到的公共代码提取到 common 代码块中
new CommonsChunkPlugin({
name: 'common',
chunks: ['a', 'b']
}),
]
};
复制代码
使用Plugin的难点在于掌握Plugin自己提供的配置项
devServer
hot
启用DevServer的模块热更新功能。
inline
配置是否自动注入这个代理客户端到将运行在页面里的Chunk中，默认是自动注入。 若是开启inline，DevServer会在构建完变化后的代码时经过代理客户端控制网页刷新 若是关闭inline，DevServer将没法直接控制要开发的玩野，这时它会经过iframe的方式去运行要开发的网页。
contentBase
配置DevServer HTTP服务器的文件根目录，默认状况下为当前执行目录，一般是项目根目录。假如你想把项目根目录下的public目录设置成DevServer服务器的文件根目录：
devServer: {
contentBase： paht.join(__dirname, 'public'）
}
复制代码
DevServer服务器经过HTTP服务暴露出的文件分为两类：
- 暴露本地文件
- 暴露Webpack构建出的结果，因为构建出的结果交给了DevServer，因此你在使用了DevServer时在本地找不到构建出的文件。
contentBase只能用来配置暴露本地文件的规则，能够经过contentBase: false来关闭暴露本地文件。
headers
该配置项能够在HTTP响应中注入一些HTTP响应头：
devServer: {
headers: {
'X-foo':'bar'
}
}
复制代码
host
用于配置DevServer服务监听的地址
allowedHosts
配置一个白名单列表，只有HTTP请求的HOST在列表里才正常返回
allowedHosts: [
// 匹配单个域名
'host.com',
'sub.host.com',
// host2.com 和全部的子域名 *.host2.com 都将匹配
'.host2.com'
]
复制代码
https
默认使用HTTP协议服务，它也能经过HTTPS协议服务，要切换HTTPS服务也很简单：
devServer: {
https: true
}
复制代码
DevServer会自动为你生成一份HTTPS证书，也能够本身配置：
devServer:{
https: {
key: fs.readFileSync('path/to/server.key'),
cert: fs.readFileSync('path/to/server.crt'),
ca: fs.readFileSync('path/to/ca.pem')
}
}
复制代码
compress
该配置决定是否启用gzip压缩，默认为false
其余配置项
Target
target配置项可让webpack构建出针对不一样运行环境的代码，target能够是如下之一：
web：针对浏览器，默认选项，全部代码集中在一个文件里 node： 针对Node.js，使用require语句加载chunk代码 async-node： 针对Node.js，异步加载chunk代码 webworker： 针对WebWorker electron-main： 针对Electron主线程 elertron-renderer： 针对Electron渲染线程
Devtool
配置Webpack如何生成Source Map, 默认值是false，想为构建出的代码生成Source Map能够：
module.export = {
devtool: 'source-map'
}
复制代码
Watch和WatchOptions
它支持监听文件更新，在文件发生变化时从新编译，默认是关闭的：
module.export = {
watch: true
}
复制代码
在使用DevServer时，监听模式默认是开启的
watchOptions配置项能够更灵活的控制监听模式:
module.export = {
// 只有在开启监听模式时，watchOptions 才有意义
// 默认为 false，也就是不开启
watch: true,
// 监听模式运行时的参数
// 在开启监听模式时，才有意义
watchOptions: {
// 不监听的文件或文件夹，支持正则匹配
// 默认为空
ignored: /node_modules/,
// 监听到变化发生后会等300ms再去执行动做，防止文件更新太快致使从新编译频率过高
// 默认为 300ms
aggregateTimeout: 300,
// 判断文件是否发生变化是经过不停的去询问系统指定文件有没有变化实现的
// 默认每隔1000毫秒询问一次
poll: 1000
}
}
复制代码
Externals
配置Webpack要构建的代码中使用了哪些不用被打包的模块，也就是说这些模板是外部环境提供的，Webpack在打包时能够忽略它们。
经过Externals能够告诉Webpack JavaScript运行环境已经内置了那些全局变量，针对这些全局变量不用打包进代码中而是直接使用全局变量：
module.export = {
externals: {
// 把导入语句里的 jquery 替换成运行环境里的全局变量 jQuery
jquery: 'jQuery'
}
}
复制代码
ResolveLoader
用来告诉Webpack如何去寻找Loader
module.exports = {
resolveLoader:{
// 去哪一个目录下寻找 Loader
modules: ['node_modules'],
// 入口文件的后缀
extensions: ['.js', '.json'],
// 指明入口文件位置的字段
mainFields: ['loader', 'main']
}
}
复制代码
该配置项一般用于加载本地的Loader
多种配置类型
除了经过导出一个Object来描述Webpack所需的配置外，还有其余更灵活的方式。
导出一个Function
在大多数时候你须要从同一份源码中构建出多份代码，一份用于开发时，一份用于发布线上。
若是采用导出一个Object来描述Webpack所需的配置的文件，须要写两个文件。在启动时经过webpack --config webpack.config.js来指定使用哪一个配置文件。
采用导出一个Function的方式，能经过JavaScript灵活的控制配置，作到只用一个配置文件就能完成以上要求。
const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
module.exports = function (env = {}, argv) {
const plugins = [];
const isProduction = env['production'];
// 在生成环境才压缩
if (isProduction) {
plugins.push(
// 压缩输出的 JS 代码
new UglifyJsPlugin()
)
}
return {
plugins: plugins,
// 在生成环境不输出 Source Map
devtool: isProduction ? undefined : 'source-map',
};
}
复制代码
在运行 Webpack 时，会给这个函数传入2个参数，分别是：
env：当前运行时的 Webpack 专属环境变量，env 是一个 Object。读取时直接访问 Object 的属性，设置它须要在启动 Webpack 时带上参数。例如启动命令是 webpack --env.production --env.bao=foo时，则 env 的值是 {"production":"true","bao":"foo"}。 argv：表明在启动 Webpack 时全部经过命令行传入的参数，例如 --config、--env、--devtool，能够经过 webpack -h 列出全部 Webpack 支持的命令行参数。 就以上配置文件而言，在开发时执行命令 webpack 构建出方便调试的代码，在须要构建出发布到线上的代码时执行 webpack --env.production 构建出压缩的代码。
导出一个返回Promise的函数
module.exports = function(env = {}, argv) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
// ...
})
}, 5000)
})
}
复制代码
导出多份配置
Wepack支持导出一个数组，数组汇总能够包含每份配置，而且每份配置都会执行一遍构建。
module.exports = [
// 采用 Object 描述的一份配置
{
// ...
},
// 采用函数描述的一份配置
function() {
return {
// ...
}
},
// 采用异步函数描述的一份配置
function() {
return Promise();
}
]
复制代码
这特别适合用Webpack构建一个要上传到Npm仓库的库，由于库中可能须要包含多种模块化格式的代码，例如CommonJS， UMD
总结
从前面的配置看来选项不少，一般可用以下经验去判断如何配置Webpack：
- 想让源文件加入到构建流程中去被Webpack控制，配置entry
- 想自定义输出文件的位置和名称，配置output
- 想自定义寻找依赖模块时的策略， 配置resolve
- 想自定义解析和转换文件的策略， 配置module， 一般是配置module.rules里的Loader
- 其余的大部分需求可能要经过Plugin去实现，配置Plugin
- 1. 妈妈不再用担忧我不会webpack了2
- 2. 妈妈不再用担忧我不会webpack了
- 3. 妈妈不再用担忧个人优化｜Webpack系列（二）：SplitChunksPlugin源码讲解
- 4. Python爬取斗图啦，妈妈不再会担忧我无图可刷了
- 5. Python玩转随机数，妈妈不再会担忧我不会随机数了
- 6. Python网络解析库Xpath，妈妈不再会担忧我不会解析了
- 7. Kotlin | 随查指南，妈妈不再担忧我不会Ctrl+F了
- 8. 妈妈不再用担忧你不会使用线程池了（ThreadUtils）
- 9. 521我发誓读完本文，不再会担忧Spring配置类问题了
- 10. 有了这套模板，再不担忧刷不动LeetCode了
- 更多相关文章...
- • C# 不安全代码 - C#教程
- • 伪造目标不可达的ICMP数据包 - TCP/IP教程
- • SpringBoot中properties文件不能自动提示解决方法
- • IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 妈妈不再用担忧我不会webpack了2
- 2. 妈妈不再用担忧我不会webpack了
- 3. 妈妈不再用担忧个人优化｜Webpack系列（二）：SplitChunksPlugin源码讲解
- 4. Python爬取斗图啦，妈妈不再会担忧我无图可刷了
- 5. Python玩转随机数，妈妈不再会担忧我不会随机数了
- 6. Python网络解析库Xpath，妈妈不再会担忧我不会解析了
- 7. Kotlin | 随查指南，妈妈不再担忧我不会Ctrl+F了
- 8. 妈妈不再用担忧你不会使用线程池了（ThreadUtils）
- 9. 521我发誓读完本文，不再会担忧Spring配置类问题了
- 10. 有了这套模板，再不担忧刷不动LeetCode了