webpack笔记1
2024-09-02 09:52:13
1.设置多个入口起点
多用于提取公共类库
a、利用commonChunkPlugin
const webpack= require('webpack');
const path = require('path');
const HtmlWebpackPlugin= require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js',
//工具类放在一个入口
//当内容为数组时，将创建多个主入口，生成一个chunk
vendor: ['jquery','angular']
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: './'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
// other vue-loader options go here
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new CleanWebpackPlugin(['dist']),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'librarys.js'
})
],
devtool: 'source'
};
这样就能生成librarys.js，包含jquery与angular，但值得注意的是会连同公共类库一起打包
b.利用external提取公共类库（推荐方法）
const path = require('path');
const HtmlWebpackPlugin= require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
var ManifestPlugin = require('webpack-manifest-plugin');
const webpack= require('webpack');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
//非覆盖更新
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: './'
},
externals: {
jquery: 'jquery'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new CleanWebpackPlugin(['dist'])
],
devtool: 'source'
};
注意这里使用的是使用全局变量的方式，所以得手动在index.html中引入jquery
2.commonChunkPlugin
将公共依赖放入模块提取到已有的入口chunk中，或者提取到新生成的chunk（常见）
4.动态载入
chunkFilename 非入口chunk名称
return import(/*webpackChunkName: "ladash"*/'lodash').then() 懒加载
最新文章
- tomcat相关问题
- PHP面向对象04_串行化
- Hiredis 基本使用
- [xampp]在Crunch Bang下安装xampp1.8.3
- linux程序调试常用命令
- linux设备驱动之select
- DataUml Design 课程6-DataUML Design 1.1版本号正式宣布（支持PD数据模型）
- 一个可以提高开发效率的Git命令-- Cherry-Pick
- LeetCode 240 - 搜索二维矩阵 II
- ELK部署详解--elasticsearch
- java之webservice客户端
- 将不确定变为确定~老赵写的CodeTimer是代码性能测试的利器
- ORA-00020:maximum number of processes (150) exceeded
- linux 程序实现后台运行
- [原]unity3D 移动平台崩溃信息收集
- java 中常见的一些错误
- Python3 pip出现Fatal error in launcher: Unable to create process using '"'
- shell 输出双引号
- hdu 5468(dfs序+容斥原理)
- C、C++数据类型所占字节数