1. webpack学习之entry，output
entry: {
vendor:['jquery'],
commons:["./common/util.a.js","./common/util.b.js"],
main:"./index.js"
},
output:{
filename:"./[name].[chunkhash:8].js", // path: __dirname + '/out',
publicPath: "" //静态资源公共路径
},
entry ： 可以设置为字符串，数组，或者对象，作者在这里用常用的对象形式，main一般作为js入口文件，vendor一般放第三方库和项目依赖，commons一般放一些util文件等。
output ：entry设置几个入口，这边就会有几个出口文件，设置多个文件出口，可以后面加上hash，如果想输出到不用文件夹，给entry的key加上文件夹名称即可，例如：test/commons: [...]
2. webpack学习之插件
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
// 拷贝第三方js库到out文件夹下面
new CopyWebpackPlugin([
{
from: path.resolve(__dirname+'/src/external.js'),
to: './'
// ignore: [ '*.js' ] //忽略某一部分文件
}
]),
new ExtractTextPlugin({
filename: './index.[chunkhash:8].',
allChunks: true,
disable: false
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /index\.[a-z 0-9]{8}\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: false
}),
new CleanWebpackPlugin(['*'], {
root: __dirname + '/out',
verbose: true,
dry: false,
}),
new HtmlWebpackPlugin({
template: './index.html'
})
只是为了说明插件作用，上面代码实例没有顺序，使用时如果顺序有问题，可能会导致构建报错，插件的说明只是说了大概作用，具体使用，还是要到npm 具体了解。
ProvidePlugin ： webpack配置ProvidePlugin后，在使用时将不再需要import和require进行引入，直接使用即可。比如： $('.text').text('测试')
CopyWebpackPlugin ： 讲一个文件直接拷贝到某个位置，比如讲第三方sdk 或者 某些流量检测文件直接拷贝到项目中使用。
HotModuleReplacementPlugin： 热部署插件，文件改变后，浏览器会自动刷新
NamedModulesPlugin ：这个插件的作用是在热加载时直接返回更新文件名，而不是文件的id。
ExtractTextPlugin ： 该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
HtmlWebpackPlugin：一、为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。二、可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口。
OptimizeCSSAssetsPlugin ：匹配到out文件夹中css进行压缩。
CleanWebpackPlugin ： //每次构建之前，都将上一次构建的文件夹删除，再生成新的。
3. webpack之optimization
optimization: {
//common 插件
splitChunks:{
chunks: "all",//同时分割同步和异步代码,推荐。
minSize: 0,
minChunks: 1, //最小引入次数
maxAsyncRequests: 5, //按需加载最大请求次数为5的所有模块就行拆分到一个单独的代码块中
maxInitialRequests: 3, //初始化加载最大请求次数为3的所有模块就行拆分到一个单独的代码块中
name: true,
//缓存组，将多次引用的模块test 缓存到
cacheGroups:{
// 开发模式下，缓存jquery等第三方库。
// jquery:{
// test:'jquery', //要写test设置项，不然会打包工程下所有的js文件
// chunks:'initial',
// name:'jquery',
// enforce:true
// }
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
// 生产模式下，打包entry的代码。
//打包重复使用的代码，//打包第三方类库
vendor: {
name: 'vendor',
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
},
commons: {
name: "commons",
chunks: "initial",
minChunks: Infinity
}
}
}
},
这里就不多赘述了，关键解释在上面代码实例中
4. webpack之devServer
devServer: {
contentBase: path.join(__dirname, ""), //注意这边路径不要写太详细，会导致部分文件重新构建，页面不刷新
watchContentBase: true,
//因为热更新使用的是内存 默认资源是保存在内存中的 需要使用publishpath制定相对路径
port: 8077,
hot: true, //热更新
hotOnly: false,
inline: true,
historyApiFallback: true, //跳转页面
openPage: './index.html', //默认打开的页面
open: true, //自动打开页面,
clientLogLevel: "none", //阻止打印那种搞乱七八糟的控制台信息
allowedHosts:[], //允许访问的服务器
proxy: {
'/api': 'http://localhost:3000' //ajax 访问代理
},
watchOptions: {
poll: true
}
}
关键解释在上面代码实例中
代码在github上，需要的同学，可以clone到本地学习，还有多页面打包方法在github上，感兴趣的可以去看看。
本文作者原创，仅供学习交流使用，转载需注明出处。
网友评论