webpack4的知识总结
一 环境搭建
webpack其实就是一个JavaScript应用程序的静态模块打包器。
webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系，
webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，
最后将应用程序需要的每个模块打包成一个或者多个bundle
1.安装node
node官网地址: https://nodejs.org/zh-cn/
2.创建package.json文件
npm init
3.安装webpack
本地安装：（推荐）
npm install --save-dev webpack
npm install --save-dev webpack-cli
全局安装：
npm install --global webpack webpack-cli
4.打包
默认配置
entry:"src/index.js"
output:"dist/main.js"
package.json文件下添加scripts,配置打包模式
{
"scripts":{
"dev":"webpack --mode development",
"prod":"webpack --mode production"
}
}
npm run dev
npm run prod
二 基础配置webpack.config.js
1.新建文件 webpack.config.js
2.配置入口entry和output
（1）path指文件打包后的存放路径
（2）path.resolve()方法将路径或路径片段的序列处理成绝对路径
（3）__dirname 表示当前文件所在的目录的绝对路径
（4）filename是打包后文件的名称
示例代码:
const path = require('path');
module.exports = {
entry:'./public/index.js',
output:{
path:path.resolve(__dirname,'build'),
filename:"bundle.js"
}
}
示例代码2:
const path = require('path');
module.exports = {
// 多文件单出口
// entry:['./public/index.js','./public/index2.js'],
// output:{
// path:path.resolve(__dirname,'build'),
// filename:"bundle.js"
// }
//多入口多出口
entry:{
pageOne: './public/pageOne/index.js',
pageTwo: './public/pageTwo/index.js',
pageThree: './public/pageThree/index.js'
},
output:{
path:path.resolve(__dirname,'build'),
filename:"[name].js"
}
}
3.配置webpack-dev-server
npm install --save-dev webpack-dev-server
配置webpack.config.js文件
devServer:{
contentBase:"./build",
host:"localhost",
port:8080,
open:true //自动打开页面
}
配置package.json
"scripts": {
"start": "webpack-dev-server --mode development"
}
在build文件夹下新建index.html文件，在html中引入bundle.js
npm run start
二 loader加载组件
1.加载css
npm install style-loader css-loader --save-dev
在webpack.config.js文件里配置module中的rules
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
创建index.css文件并import进index.js文件中
import './index.css';
2.加载编译less和sass
安装less-loader和less 和 安装sass-loader和node-sass
npm install less-loader less --save-dev
npm install sass-loader node-sass --save-dev
在webpack.config.js文件里配置module中的rules
module:{
rules:[
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
3.使用PostCSS添加浏览器前缀
npm install --save-dev postcss-loader autoprefixer
需要和autoprefixer一起用,在webpack.config.js文件里配置module中的rules
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader',{
loader:'postcss-loader',
options:{
plugins:[require("autoprefixer")()]
}
}]
}
]
}
4 文件处理
npm install --save-dev file-loader
图片module中的rules
module:{
rules:[
{
test:/\.(png|jpg|gif|jpeg)$/,
use:[{
loader:'file-loader',
options:{
name:'[hash]wangou.jpg',
outputPath:'./img'
}
}]
}
]
}
配置options：
name：为你的文件配置自定义文件名模板（默认值[hash].[ext]）
context：配置自定义文件的上下文，默认为 webpack.config.js
publicPath：为你的文件配置自定义 public 发布目录
outputPath：为你的文件配置自定义 output 输出目录
[ext]：资源扩展名
[name]：资源的基本名称
[path]：资源相对于 context的路径
[hash]：内容的哈希值
字体module中的rules
module:{
rules:[
{
test:/\.(ttf|woff|woff2|eot|svg)$/,
use:[{
loader:'file-loader',
options:{
outputPath:'font/'
}
}]
}
]
}
js库module中的rules
以jquery库为例子
1）本地导入
const webpack = require('webpack');
module.exports = {
entry:'./public/index.js',
resolve:{
alias:{
jQuery: path.resolve(__dirname,"public/js/jquery.min.js")
}
},
plugins:[
new webpack.ProvidePlugin({
jQuery:"jQuery"
})
]
}
2）npm安装模块
安装jquery库：
npm install jquery --save-dev
直接在js里import引入
import $ from 'jquery'
5 HTML中引入图片
cnpm install --save-dev html-loader
module中的rules
{
test:/\.(html)$/,
option:{
attrs:['img:src', 'img:data-src']
}
}
6.babel编译ES6
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:'babel-loader'
}
]
},
webpack 插件
1.生成HTML
npm install html-webpack-plugin --save-dev
module中的rules
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
template:"./public/index.html",
filename:"webpack.html",
minify:{
minimize:true,
removeComments:true,
removeAttributeQuotes:true,
collapseWhitespace:true,
minifyCSS:true,
minifyJS:true,
removeEmptyElements:true
},
hash:true
})
]
2.提取分离css
npm install --save-dev mini-css-extract-plugin
module中的rules
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module:{
rules:[
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,'css-loader',{
loader:'postcss-loader',
options:{
plugins:[require("autoprefixer")()]
}
}]
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename:"./css/[name].css"
})
]
3 压缩css及优化css结构
npm install --save-dev optimize-css-assets-webpack-plugin
module中的rules
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
plugins:[
new OptimizeCSSAssetsPlugin({
assetNameRegExp:/\.css$/g,
cssProcessor:require('cssnano'),
cssProcessorPluginOptions:{
preset:['default',{discardComments:{removeAll:true}}]
},
canPrint:true
})
]
4copy静态文件
module中的rules
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins:[
new CopyWebpackPlugin([
{
from:__dirname+'/public/assets',
to:__dirname+'/build/assets'
}
])
]
5清除垃圾文件
npm install --save-dev clean-webpack-plugin
module中的rules
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins:[
new CleanWebpackPlugin({
dry: false
}),
]
6 SourceMap 调试代码
1）js调试
devtool:"source-map"
2）css调试
调试css时需要将压缩css的插件注释掉(optimize-css-assets-webpack-plugin)
module:{
rules:[
{
test:/\.css$/,
use:[{
loader:'css-loader',
options:{
source:true
}
}]
}
]
},
7模块热替换
devServer:{
contentBase:'./build', //设置服务器访问的基本目录
host:'localhost', //服务器的ip地址
port:8080, //端口
open:true, //自动打开页面
hot:true,
hotOnly:true
},
plugins:[
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
]
entry文件js
if(module.hot){
module.hot.accept()
}
8区分生产环境和开发环境
npm install --save-dev webpack-merge
将webpack.config.js拆分为三个文件，分别是webpack.common.conf.js、webpack.dev.conf.js和webpack.prod.conf.js。
webpack.common.conf.js是放一些我们公用的配置，比如入口entry、出口output、常用loader以及插件等。
webpack.dev.conf.js是在开发环境上的配置，比如devServer配置、模块热替换等方便开发的配置
webpack.prod.conf.js是在生产环境上的配置，比如提取分离css、压缩css和js等
webpack.common.conf.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:'./public/index.js',
output:{
path:path.resolve(__dirname,'../build'),
filename:"bundle.js"
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader',{
loader:'postcss-loader',
options:{
plugins:[require("autoprefixer")()],
sourceMap:true
}
}]
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(png|jpg|gif|jpeg)$/,
use:[{
loader:'file-loader',
options:{
name:'[hash]wangou.jpg',
outputPath:'./img'
}
}]
},
{
test:/\.(ttf|woff|woff2|eot|svg)$/,
use:[{
loader:'file-loader',
options:{
outputPath:'font/'
}
}]
},
{
test:/\.js$/,
exclude:/node_modules/,
use:'babel-loader'
},
{
test:/\.(html)$/,
use:{
loader:'html-loader',
options: {
attrs: ['img:src','img:data-src']
}
}
}
]
},
resolve:{
alias:{
jQuery: path.resolve(__dirname,"../public/js/jquery.min.js")
}
},
plugins:[
new CleanWebpackPlugin(['build'],{
root:path.resolve(__dirname,'../')
}),
new webpack.ProvidePlugin({
jQuery:"jQuery"
}),
new HtmlWebpackPlugin({
template:"./public/index.html",
filename:"webpack.html",
minify:{
minimize:true,
removeComments:true,
removeAttributeQuotes:true,
collapseWhitespace:true,
minifyCSS:true,
minifyJS:true,
removeEmptyElements:true
},
hash:true
}),
// 分离css
// new ExtractTextPlugin("./css/[name].css")
new MiniCssExtractPlugin({
filename:"./css/[name].css"
}),
]
}
webpack.dev.conf.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.conf.js');
module.exports = merge(common,{
devtool:'cheap-module-eval-source-map',
devServer:{
contentBase:'./build', //设置服务器访问的基本目录
host:'localhost', //服务器的ip地址
port:8080, //端口
open:true, //自动打开页面
hot:true,
hotOnly:true
},
plugins:[
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
})
webpack.prod.conf.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const common = require('./webpack.common.conf.js');
const merge = require('webpack-merge');
const path = require('path');
module.exports = merge(common,{
devtool:'source-map',
plugins:[
new CopyWebpackPlugin([
{
from:path.resolve(__dirname,'../public/assets'),
to:path.resolve(__dirname,'../build/assets')
}
])
]
})
配置文件package.json
"scripts": {
"dev": "webpack --mode development --config ./config/webpack.dev.conf.js",
"build": "webpack --mode production --config ./config/webpack.prod.conf.js",
"start": "webpack-dev-server --mode development --config ./config/webpack.dev.conf.js"
},
四 优化打包的速度
1.减少文件搜索范围
1）优化resolve.extensions配置
在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。
在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能：
后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。
在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require('./data') 写成 require('./data.json') 。
2）优化 resolve.modules 配置
resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块。
resolve.modules 的默认值是 ['node_modules']，会采用向上递归搜索的方式查找
（3）优化resolve.alias配置
resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。
（4）缩小文件匹配范围
Include：需要处理的文件的位置
Exclude：排除掉不需要处理的文件的位置
2.设置noParse
防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能。比如jquery、elementUI等库
3.给babel-loader设置缓存
babel-loader 提供了 cacheDirectory特定选项（默认 false）：设置时，给定的目录将用于缓存加载器的结果。
4.使用happyPack
HappyPack的基本原理：在webpack构建过程中，我们需要使用Loader对js，css，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大的，且这些转换操作不能并发处理文件，而是需要一个个文件进行处理，HappyPack的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间。
浙公网安备 33010602011771号