1.新建一个文件夹 初始化项目，会生成一个package.json文件
yarn init -y
或者npm init -y
2.安装webpack webpack-cli依赖包
yarn add webpack webpack-cli -D
or: npm i webpack webpack-cli -D
package.json下会生成devDependencies中会有webpack、webpack-cli
{
"name": "StudyWebpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
}
3.项目中新建src文件夹，src文件夹下新建index.js
4.项目中新建webpack.config.js文件
5.在webpack.config.js中写配置项
module.exports = {
mode:'development',//开发环境 development:开发环境 production:生成环境
entry:'./src/index.js',//入口文件
output:{//出口配置
filename:'index.js',//出口文件名
path:__dirname+'/dist'//出口路径
}
}
6.在项目下打开命令行窗口，运行npx webpack命令，webpack项目会自动先找到webpack.config配置项，然后根据配置信息进行打包，成功后项目中会多个dist文件，dist就是打包输出的结果。
7.注意：只要修改了webpack.config.js文件就要重新
webpack开发环境配置
打包html资源
1.安装 html-webpack-plugin
yarn add html-webpack-plugin -D
或者npm i html-webpack-plugin -D
2.在webpack.config.js中引入html-webpack-plugin插件并配置使用。详情看代码注释！
/*
插件的使用步骤：
plugins: 1. 下载 2. 引入 3. 使用
*/
//引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//模式
mode:'development',
//入口
entry:'./src/index.js',
//出口
output:{
filename:'bundle.js',//文件名
path:__dirname+'/dist'//出口路径
},
//配置插件
plugins:[
// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
// 需求：需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template:'./src/index.html'
})
]
}
3.运行npx webpack 打包项目，dist文件下会生成index.html文件，并且index.html中自动引入了bundle.js文件
单页面和多页面配置
entry: 入口起点
方式一：单入口 string -->'./src/index.js' 打包形成一个chunk。 输出一个bundle文件。此时chunk的名称默认是 main。
方式二：多入口 array -->['./src/index.js','./src/add.js'] 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
方式三：多入口 object{index:'./src/index.js', add:'./src/add.js'} 有几个入口文件就形成几个chunk，输出几个bundle文件,此时chunk的名称是 key。
module.exports = {
mode: 'development',
// entry:'./src/index.js',方式一
// entry:['./src/index.js','./src/add.js'],方式二
entry: {//方式三
index: './src/index.js',
add: './src/add.js',
home:'./src/home.js'
},
//出口
output: {
//文件名 [name]根据入口的名称定义
filename: 'js/[name].js',
//输出文件目录（将来所有资源输出的公共目录）
path: __dirname + '/dist',
// 所有资源引入公共路径前缀
publicPath: '/',
// 非入口chunk的名称
chunkFilename: 'js/[name]_chunk.js',
// library: '[name]', // 整个库向外暴露的变量名
// libraryTarget: 'window' // 变量名添加到哪个上 browser
// libraryTarget: 'global' // 变量名添加到哪个上 node
// libraryTarget: 'commonjs'
},
plugins: [
//多出口 一般和多入口对应
new HtmlWebpackPlugin({
template: './src/index.html',
filename:'index.html',
//只引入index.js，不指定的话会引入index、home.js
chunks:['index']
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename:'home.html',
chunks:['home']
}),
]
}
打包css资源
1.安装css-loader style-loader less-loader less,我这里只介绍css和less其它样式用同样的配置。
yarn add css-loader style-loader less-loader less -D
2.配置webpack.config.js，在module中配置css-loader和less-loader。详情看代码注释
//引入插件
const HtmlWbpackPlugin = require('html-webpack-plugin')
module.exports = {
//模式
mode:'development',//开发环境 development:开发环境 production:生成环境
//入口
entry:'./src/index.js',
//出口
output:{
filename:'bundle.js',//出口文件名
path:__dirname+'/dist'//出口文件路径
},
//插件配置
plugins:[
new HtmlWbpackPlugin({
template:'./src/index.html',//配置一个模板html
name:'index.html'//生成的html名称
})
],
//loader配置
module:{
//rules是个数组，因为不同的配置需要不同的loader处理
rules:[
{
//匹配以.css结尾的文件
test:/\.css$/,
// use数组中loader执行顺序：从右到左，从下到上 依次执行
use:[
// 创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader'
]
},
{
//匹配以.less结尾的文件
test:/\.less$/,
use:[
// 创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader',
// 将less文件编译成css文件
'less-loader'
]
}
]
}
}
打包图片资源
1.安装loader,html-loader url-loader file-loader
yarn add file-loader url-loader html-loader -d
2.配置webpack.config，详情看代码注释。
解决使用html-loader处理html中引入图片失效，解决方法在url-loader中的options对象中中添加esModule:false属性。
const HtmlWebpckPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development',
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:__dirname+'/dist'
},
plugins:[
new HtmlWebpckPlugin({
template:'./src/index.html',
name:'idnex.html'
})
],
module:{
rules:[
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
//匹配图片结尾的文件，可手动添加
test:/\.(png|jpg|jpeg|gif)/,
// 使用url-loader
loader:'url-loader',
options:{
// 图片大小小于8kb，就会被base64处理
// 优点: 减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit:8*1024,
// 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
// 解析时会出问题：[object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs解析
esModule:false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
//匹配.html结尾的文件
test:/\.html/,
// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
loader:'html-loader'
}
]
}
}
打包其它资源
1.使用exclude属性，排除法
2.配置webpack.config,详情看代码注释
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bunder.js',
path: __dirname + '/dist'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
name: 'index.html'
})
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
//处理其它资源
{
//excude排除法 后期手动添加
exclude: /\.(css|js|html|less|png|jpg|jpeg|gif)$/,
//使用file-loader
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
}
}
devServer自动化
开发服务器 devServer后，只会在内存中编译打包，不会有任何输出；自动编译，自动打开浏览器，修改代码后自动刷新浏览器；
1.安装webpack-dev-server
yarn add webpack-dev-server -D
方法一：配置webpack.config,详细配置请看代码注释
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development',
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:__dirname+'/dist'
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
})
],
// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server
devServer: {
// 项目构建后路径
contentBase:__dirname+'/dist',
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
}
方法二：在wepack.json中配置scripts
{
"name": "StudyWebpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack",//打包
"dev": "webpack-dev-server --open --port 3000 --host"//开发服务器 devServer
}
文件归类配置
当src下的文件很多时显得很乱，应当给相应的文件归类；
outputPath属性为loader处理后的文件增加文件夹归类
output输出对象中 filename:'js/bundle.js'，增加js文件夹
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 模式
mode:'development',
// 入口
entry:'./src/js/index.js',
// 出口
output:{
filename:'js/bundle.js',//输出路径增加js文件夹
path:__dirname+'/dist'
},
//devServer自动化
devServer:{
contentBase:__dirname+'/dist',
compress:true,
port:3000,
open:true
},
// 插件配置
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
// loader配置
module:{
rules:[
{ // 处理css
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{ //处理less
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{ //处理图片
test:/\.(png|jpg|jpeg|gif)/,
loader:'url-loader',
options:{
limit: 8*1024,
name:'[hash:10].[ext]',
exModule:false,
outputPath:'imgs'//图片输出增加imgs文件夹
}
},
{ //处理html中图片
test:/\.html$/,
loader:'html-loader'
},
{ //处理其它文件
exclude:/\.(css|html|js|less|png|jpg|jpeg|gif)/,
loader:'file-loader',
options:{
name:'[hash:10].[ext]',
outputPath:'media'//其它文件增加输出文件夹
}
}
]
}
}
webpack生产环境配置
提取css样式文件
1.安装mini-css-extract-plugin插件
yarn add mini-css-extract-plugin -D
2.配置webpack.config
const HtmlWebpackPlugin = require('html-webpack-plugin')
//1.引入mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode:'development',
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:__dirname+'/dist'
},
module:{
rules:[
{
test:/\.css$/,
use:[
// 'style-loader',
//3. 这个loader取代style-loader。作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test:/\.less$/,
use:[
// 'style-loader',
//3. 这个loader取代style-loader。作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
//2.配置插件
new MiniCssExtractPlugin({
//对输出的css文件进行文件夹配置和重命名
filename:'css/bundle.css'
})
]
}
css兼容性处理
1.安装postcss-loader postcss-preset-env
yarn add postcss-loader postcss-preset-env -D
2.package.json中配置browserslist
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
3.配置webpack.config，详情看代码注解
const HtmlWebpackPlugin = require('html-webpack-plugin')
//1.引入mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 设置nodejs环境变量 默认是production环境
// process.env.NODE_ENV = 'development';
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 'style-loader',
//3. 这个loader取代style-loader。作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
'css-loader',
//帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
{
// 使用loader的默认配置
// 'postcss-loader',
// 修改loader的配置
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
//2.配置插件
new MiniCssExtractPlugin({
//对输出的css文件进行文件夹配置和重命名
filename: 'css/bundle.css'
})
]
}
压缩css
1.安装optimize-css-assets-webpack-plugin插件
yarn add optimize-css-assets-webpack-plugin -D
2.配置webpack.config，详情看代码注释
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
1.引入optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebapckPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/bundle.css'
}),
//2.配置插件optimize-css-assets-webpack-plugin
new OptimizeCssAssetsWebapckPlugin()
]
}
js语法检查
1.安装 eslint,eslint-loader,eslint-config-airbnb-base,eslint-plugin-import
yarn add eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import
2.package.json中配置eslintConfig
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
}
3.配置webapck.config，详情解释看代码注释
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development',
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:__dirname+'/dist'
},
module:{
rules:[
{
// 匹配以.js结尾的文件
test:/\.js$/,
// 排除node_modules下的文件，只检查自己写的代码，不检查第三方的代码
exclude:/node_modules/,
loader:'eslint-loader',
options:{
//自动修复eslint错误
fix:true
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
js兼容性处理
1.安装babel-loader @babel/core @babel/preset-env core-js
yarn add babel-loader @babel/core @babel/preset-env core-js -D
2.配置webpack.config，详情解释看代码注释
module: {
rules: [
/*
js兼容性处理：babel-loader @babel/core
1. 基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，如promise高级语法不能转换
2. 全部js兼容性处理 --> @babel/polyfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> core-js，就不需要@babel/polyfill包了
*/
{
// 匹配以.js结尾的文件
test: /\.js$/,
// 排除node_modules下的文件，只检查自己写的代码，不检查第三方的代码
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
}
js和html压缩
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//生产环境下js代码自动压缩
mode:'production',
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:__dirname+'/dist'
},
module:{
rules:[
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]
}
生产环境配置
css和less有公共的loader代码，可以抽离公共loader代码，以对象扩展的方式引入；正常来讲，一个文件只能被一个loader处理，当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：先执行eslint 在执行babel；
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 抽离css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 复用loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
// 处理css
test: /\.css$/,
use: [...commonCssLoader]
},
{
//处理less
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
正常来讲，一个文件只能被一个loader处理。
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
先执行eslint 在执行babel
*/
{
// 在package.json中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {version: 3},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new MiniCssExtractPlugin({
filename: 'css/bundle.css'
}),
new OptimizeCssAssetsWebpackPlugin()
]
}
webpack优化环境配置
HMR
作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度; 样式文件：可以使用HMR功能：因为style-loader内部实现了; js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码; 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件; html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR功能）;解决：修改entry入口，将html文件引入;
devServer: {
contentBase: __dirname+'/dist',
compress: true,
port: 3000,
open: true,
// 模块热替换
// hot: true
}
source-map
source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
source-map：外部 错误代码准确信息 和 源代码的错误位置 inline-source-map：内联 只生成一个内联source-map,错误代码准确信息 和 源代码的错误位置 hidden-source-map：外部 错误代码错误原因，但是没有错误位置,不能追踪源代码错误，只能提示到构建后代码的错误位置 eval-source-map：内联 每一个文件都生成对应的source-map，都在eval, 错误代码准确信息 和 源代码的错误位置 nosources-source-map：外部 错误代码准确信息, 但是没有任何源代码信息 cheap-source-map：外部 错误代码准确信息 和 源代码的错误位置 ,只能精确的行 cheap-module-source-map：外部 错误代码准确信息 和 源代码的错误位置 ,module会将loader的source map加入 内联 和 外部的区别：
外部生成了文件，内联没有 内联构建速度更快 开发环境：速度快，调试更友好 速度快(eval>inline>cheap>...) eval-cheap-souce-map eval-source-map 调试更友好 souce-map cheap-module-souce-map cheap-souce-map 综合推荐：eval-source-map / eval-cheap-module-souce-map 生产环境：源代码要不要隐藏? 调试要不要更友好 内联会让代码体积变大，所以在生产环境不用内联 综合推荐：source-map / cheap-module-souce-map // 开发模式 mode: 'development', devtool:'eval-source-map' //生产模式 mode: 'production', devtool:'source-map' oneOf 在不使用oneOf之前，一个文件被一个loader匹配到后还会继续向下匹配其它匹配不了的loader，这样性能不好，使用oneOf后当一个文件被一个loader匹配到后就不会向下继续匹配了；但是使用oneOf只会匹配一个loader，所以如果设置了一个文件两个loader的话需要分开写，不能写在同一个oneOf里面。
module: {
rules: [
{
// 在package.json中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下loader只会匹配一个
// 注意：不能有两个配置处理同一种类型文件
oneOf: [
{
// 处理css
test: /\.css$/,
// 配置多个loader使用use
use: [...commonCssLoader]
},
{
//处理less
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
// 配置单个loader使用loader
loader: 'babel-loader',
// 排除node_modules下的js
exclude: /node_modules/,
// 只匹配src下的js
include: __dirname + '/src',
// 优先执行
enforce: 'pre',
// 延后执行
enforce: 'post',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
}
]
}
缓存
当已经加载了js或css等其它后，再次使用的时候不需要再次进行请求了，而是使用缓存后的文件；
hash： 每次wepack构建时会生成一个唯一的hash值。
1.问题: 因为js和css同时使用一个hash值。
2.如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样。
1.问题: js和css的hash值还是一样的。
2.因为css是在js中被引入的，所以同属于一个chunk。
contenthash：根据文件的内容生成hash值。不同文件hash值一定不一样。
1.让代码上线运行缓存更好使用
/*
缓存：
babel缓存
cacheDirectory: true
--> 让第二次打包构建速度更快
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
],
// 开启babel缓存
// 第二次构建时，会读取之前的缓存
cacheDirectory:true
}
}
tree shaking
前提：1. 必须使用ES6模块化 2. 开启production环境
作用: 减少代码体积
sideEffects配置
"sideEffects": false // 所有代码都都可以进行tree shaking
####副作用 可能会把css / @babel/polyfill 文件干掉；
"sideEffects": [".css", ".less"]跳过css、less文件(如果压过没有使用css也会打包进去)
code split
[name]：取入口文件的名称；
optimization：
可以将node_modules中代码单独打包一个chunk最终输出
自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
懒加载
当一个index.js中引入了其它js文件，进入index.js时不希望立马加载其它js，用到其它js时再加载；
//当点击按钮时再加载utils.js文件
document.querySelector('#btn').onclick = function(){
// 懒加载~：当文件需要使用时才加载~
// 预加载 prefetch：会在使用之前，提前加载js文件 webpackPrefetch: true
// 正常加载可以认为是并行加载（同一时间加载多个文件）
// 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
// 慎用预加载，兼容性问题，移动端和低版本浏览器不支持
import(/* webpackChunkName: 'test' */'./utils').then(({getName})=>{
console.log(getName())
})
}
PWA
1.安装workbox-webpack-plugin
yarn add workbox-webpack-plugin -D
2.plugins数组中加载插件
plugins: [
...
new WorkboxWebpackPlugin.GenerateSW({
/*
1. 帮助serviceworker快速启动
2. 删除旧的 serviceworker
生成一个 serviceworker 配置文件~
*/
clientsClaim: true,
skipWaiting: true
})
]
/*
1. eslint不认识 window、navigator全局变量
解决：需要修改package.json中eslintConfig配置
"env": {
"browser": true // 支持浏览器端全局变量
}
2. sw代码必须运行在服务器上
--> nodejs
-->
npm i serve -g
serve -s dist 启动服务器，将dist目录下所有资源作为静态资源暴露出去
*/
// 注册serviceWorker
// 处理兼容性问题
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then(() => {
console.log('sw注册成功了~');
})
.catch(() => {
console.log('sw注册失败了~');
});
});
}
多进程打包 thread-loader
webpack是单线程模型的，也就是说Webpack一个时刻只能处理一个任务，不能同时处理多个任务。使用thread-loader进行多进程打包。
1.安装thread-loader
注意：把这个 thread-loader 放置在其他 loader 之前，options中放一些属性值；进程启动大概为600ms，进程通信也有开销；只有工作消耗时间比较长，才需要多进程打包；
yarn add thread-loader -D
2.配置js loader`
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader:'thread-loader',
options:{
workers:2//设置进程数量
}
},
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
]
}
}
]
}
externals
当html中引入了cdn第三方库，js中也Import导入了同个第三方库，我们就可以使用externals来配置打包；
//html中引入jquery的cdn
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
//js中导入了jquery
import $ from 'jquery'
//webpack.config配置移除jquery打包进去
// 移除某些包被打包进来
externals:{
jquery:'jQuery'
}
dll
使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包，然后再主项目中进行打包时直接引用就可以了，从而加快了打包速度。
1.新建webpack.dll.js文件
2.配置webpack.dll.js
const webpack = require('webpack')
module.exports = {
//需要打包的第三方库
entry:{
jquery:['jquery'],
// vue:['vue']
},
output:{
filename:'[name].js',
path:__dirname+'/dll',
library:'[name]_[hash:10]'// 打包的库里面向外暴露出去的内容叫什么名字
},
plugins:[
// 打包生成一个 manifest.json --> 提供和jquery映射
new webpack.DllPlugin({
name:'[name]_[hash:10]',//映射库暴露出的名称
path:__dirname+'/dll/manifest.json'//文件地址
})
],
mode: 'production'
}
3.配置好webpack.dll.js后运行webpack --config webpack.dll.js命令行，项目下会生成dll文件夹，dll文件夹下会有第三方库的js和manifest.json文件；
4.安装add-asset-html-webpack-plugin插件
yarn add add-asset-html-webpack-plugin -D
5.配置webpack.config
const webpack = require('webpack')
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
module.exports = {
mode:'production',//开发环境 development:开发环境 production:生成环境
plugins:[
// 告诉webpack哪些库不参与打包，同时使用时的名称也得变~
new webpack.DllReferencePlugin({
manifest:__dirname+'/dll/manifest.json'
}),
// 将某个文件打包输出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath:__dirname+'/dll/jquery.js'
})
],
}
optimization
安装 terser-webpack-plugin插件
const TerserWebpackPlugin = require('terser-webpack-plugin')
optimization: {
splitChunks: {
chunks: 'all'
// 默认值，可以不写~
/* minSize: 30 * 1024, // 分割的chunk最小为30kb
maxSiza: 0, // 最大没有限制
minChunks: 1, // 要提取的chunk最少被引用1次
maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
maxInitialRequests: 3, // 入口js文件最大并行请求数量
automaticNameDelimiter: '~', // 名称连接符
name: true, // 可以使用命名规则
cacheGroups: {
// 分割chunk的组
// node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
// 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
vendors: {
test: /[\\/]node_modules[\\/]/,
// 优先级
priority: -10
},
default: {
// 要提取的chunk最少被引用2次
minChunks: 2,
// 优先级
priority: -20,
// 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
reuseExistingChunk: true
}
}*/
},
// 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
// 解决：修改a文件导致b文件的contenthash变化
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: [
// 配置生产环境的压缩方案：js和css
new TerserWebpackPlugin({
// 开启缓存
cache: true,
// 开启多进程打包
parallel: true,
// 启动source-map
sourceMap: true
})
]
}
常用辅助工具
resolve
resolve: {
// 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
alias: {
$css: __dirname + '/src/css'
},
// 配置省略文件路径的后缀名只会匹配到一个， 一般js和css文件名相同，所以不建议匹配css文
extensions:['.js', '.json', '.jsx', '.css']
}
import {addNum} from './add'//省略的后缀
watch监控
//自带功能 不需要安装
//监控 实时打包
watch:true,
//监控的配置项
watchOptions:{
poll:1000,//每秒询问1000次
aggregateTimeout:500,//防抖 停留500毫秒后再打包
ignored:/node_modules/ //不需要监控的文件
}
清除dist文件
每次打包先清除dist目录下的文件
安装clean-webpack-plugin -D
```js
//清除文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins:[
...
new CleanWebpackPlugin()
]
copy文件到dist
打包时可以把一些文件夹的内容拷贝到dist文件夹
安装 copy-webpack-plugin -D
//copy文件插件
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins:[
...
new CopyWebpackPlugin([
//把doc文件复制到dist文件夹中
{from:'./doc',to:'./'}
])
]
BannerPlugin声明
webpack自带的插件
在打包后的Js文件头加上注释声明
//webpack
const webpack = require('webpack')
plugins:[
...
new webpack.BannerPlugin('杭州柯林电气股份有限公司版权所有')
]
定义全局变量
//使用webpack自带插件DefinePlugin
new webpack.DefinePlugin({
DEV:'false',
FLAGE:JSON.stringify('pjs')//如果想存字符串类型 需要使用JSON.stringify()
})
if(DEV){
console.log("正式环境")
}else{
console.log("测试环境")
}
webpack-merge 合并配置文件 分别创建开发和生产两个文件 安装 webpack-merge -D
//webpack.pro.js
let {smart} = require('webpack-merge')
let base = require('./webpack.config.js')
module.exports = smart(base,{
mode:'production'
})
//webpack.dev.js
let {smart} = require('webpack-merge')
let base = require('./webpack.config.js')
module.exports = smart(base,{
mode:'development'
})
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！