一. 定义entry(入口文件)和output(出口文件)
二. 定义module(加载器: js、file、picture、css)
三. 定义resolve(配置模块如何解析)
四. 定义plugins(三方插件,主要有HtmlWebpackPlugin生成html插件、
ExtractTextPlugin提取样式插件、
CommonsChunkPlugin提取引用的第三方文件插件、
UglifyJsPlugin压缩插件、
DefinePlugin配置当前生产环境[后三个是webpack自带的])
1. 定义entry(入口文件)和output(出口文件)
入口文件: 对应的是项目的入口文件
* 一个入口起点: entry['index': path.join(__dirname, './src/index.js')]
* 多个入口起点: [分包必要]
entry: { //根据当前项目配置作说明
'index': [require.resolve('./polyfills'), paths.appIndexJs],
'babel-polyfill': 'babel-polyfill',
vendors: ['react', 'react-dom', 'react-redux', 'react-router', 'react-router-dom', 'redux', 'antd', 'antd-mobile']
},
出口文件: [分包必要]
output: {
path: path.resolve(__dirname, './build'), //打包输出的路径
publicPath: '../', // publicPath是打包的时候生成的文件链接(html文件)
filename: 'js/[name].[chunkhash:8].js', //输出入口文件
chunkFilename: 'js/[name].[chunkhash:8].js', //此选项决定了非入口chunk文件的名称
},
2. 定义module(加载器) [分包必要]
module.rules: 创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块应用loader,或者修改解析器(parser)
module: {
loaders: [ //loaders加载器
{
test: /\.js$/, //用正则匹配文件类型
exclude: /node_modules|picker.min.js/, //排除特定条件
loader: 'babel-loader', //使用loader解析选项 //加载器
options: { //预设选项, 详细解释:
https://webpack.docschina.org/configuration/modeule/#useentry
presets: ['es2015', 'react', 'stage-2']
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ //三方插件
fallback: 'style-loader', //编译过程中出现了错误,使用style-loader处理css
use: ['css-loader'] //loader被用于将资源转换成一个CSS导出模块(默认使用css-loader编译css, “必填”)
})
},]
}
3. 定义resolve: 打包模块时,webpack使用resolve来解析文件路径 [分包必要]
1). resolve帮助webpack找到bundle中需要引用的模块代码,这些代码包含在每个require/import语句中
2). 文件路径分为: 绝对路径[import "/home/me/file"]相对路径[import "../home/file"]模块路径[import "module/lib/file"]
3). 配置解释:
模块将在resolve.modules中指定的所有目录内搜索。 你可以替换初始模块路径,此替换路径通过使用resolve.alias配置选项来创建一个别名。
一旦根据上述规则解析路径后,解析器(resolver)将检查路径是否指向文件或目录。如果路径指向一个文件:
* 如果路径具有文件扩展名,则被直接将文件打包。
* 否则,将使用[resolve.extensions]选项作为文件扩展名来解析,此选项告诉解析器在解析中能够接受哪些扩展名(例如 .js, .jsx)。
如果路径指向一个文件夹,则采取以下步骤找到具有正确扩展名的正确文件:
* 如果文件夹中包含package.json文件,则按照顺序查找resolve.mainFields配置选项中指定的字段。并且package.json中的第一个这样的字段确定文件路径。
* 如果 package.json 文件不存在或者package.json文件中的main字段没有返回一个有效路径,则按照顺序查找resolve.mainFiles配置选项中指定的文件名,看是否能在import/require 目录下匹配到一个存在的文件名。
* 文件扩展名通过 resolve.extensions 选项采用类似的方法进行解析。
webpack 根据构建目标(build target)为这些选项提供了合理的默认配置。
4. 定义plugins
主要做:
* 生成html文件 [分包必要] //插件参数详情解释: https://segmentfault.com/a/1190000007294861
new HtmlWebpackPlugin({ //生成html文件
template: './index.html', //根据自己的指定的模板文件来生成特定的 html 文件
inject: 'body',
filename: 'js/index.html', //输出html文件的位置
}),
* 将所有css文件抽取到一个文件中 [分包必要]
new ExtractTextPlugin("js/styles.css"),(注意: 抽取css文件,需要加载器配合,具体请看上边加载器)
* 用CommonsChunkPlugin提取引用的第三方文件插件 [分包必要] //插件参数详情解释: https://segmentfault.com/q/1010000009070061
* 压缩打包文件(防止打包后文件过大)[分包必要] //插件参数详情解释:https://segmentfault.com/a/1190000008995453
* 配置当前生产环境 [分包必要]
5. 正是环境不需要生成source-map文件[devtool: 'eval-source-map']
完整的分包案例请见: webpack.prod.conf.js
webpack官网:https://webpack.docschina.org