Webpack的基本使用
Webpack进阶
- Webpack的性能优化
- Webpack配置详解
Webpack基础
webpack的五个核心概念
- Entry
- Output
- Loader
- Plugins
- Mode
安装webpack cli
npm i webpack webpack-cli -D
-D是–save -dev的缩写
运行指令
-
开发环境
//webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/bulit.js,整体打包环境是开发环境 webpack ./src/index.js -o ./build/built.js --mode=development -
生产环境
//webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/bulit.js,整体打包环境是开发环境 webpack ./src/index.js -o ./build/built.js --mode=development
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 会将process.env.NODE_ENV 的值设为development。 启用NamedChunksPlugin 和NamedModulesPlugin。 |
能让代码本地调试运行的环境 |
| production | 会将process.env.NODE_ _ENV 的值设为production。 启用FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,OccurrenceOrderPlugin, SideEffectsFlagPlugin和 UglifyJsPlugin. |
能让代码优化上线运行的环境 |
webpack的作用
- webpack能处理js/json资源，不能直接处理css/img等其他资源
- 生产环境与开发环境将ES6模块化编译成浏览器能识别等模块化
- 生产环境比开发环境多一个压缩js代码
处理不能直接打包的资源
想要处理不能直接打包的资源 需要在webpack.config.js中配置对应的loader对资源进行处理
Webpack.config.js
/*
作用：指示 webpack干哪些活(当你运行 webpack指令时,会加载里面的配置）
所有构建工具都是基于nodejs平台运行的
模块化默认采用CommonJs
注意：这里是配置文件 所以使用CommonJs src中使用的则是ES Modules
配置文件和src一定要区分开来
这里可以类比一下vue项目中的vue.config.js
*/
module.exports = {
//webpack配置
//入口起点
entry: './src/index. js',
//输出
output: {
//输出文件名
filename: 'built. js',
//输出路径
//__dirname nodes的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
module: {
rules: [
//详细loader配置
{
...
}
]
},
// plugins的配置
plugins: [
//详细 plugins的配置
],
//模式
mode: 'development' //开发模式
//mode: production
}
-
打包样式资源
// resolve用来拼接绝对路径的方法 const resolve= require('path'); module.exports = { //webpack配置 //入口起点 entry: './src/index. js', //输出 output: { //输出文件名 filename: 'built. js', //输出路径 //__dirname nodes的变量,代表当前文件的目录绝对路径 path: resolve(__dirname, 'build') }, module: { rules: [ //详细loader配置 //不同文件必须配置不同loader处理 /* 处理css资源 */ { test: /\.css$/, //使用哪些loader进行处理 use: [ // use数组中loader执行顺序:从右到左,从下到上依次执行 // 创建style标签,将js中的样式资源插入进去,添加到head中生效 'style-loader', // 将css文件变成commonJs模块加载js中,里面内容是样式字符串 'css-loader' ]//npm i css-loader style-loader -D }, /* 处理less资源 */ { test: /\.less$/, use: [ 'style-loader', 'css-loader', // 将less文件编译成css文件 'less-loader' ] } ] }, // plugins的配置 plugins: [ //详细 plugins的配置 ], //模式 mode: 'development' //开发模式 //mode: production } -
打包html资源
/* loader: 1.下载 2.使用（配置loader） plugins: 1.下载 2.引入 3.使用 */ const resolve= require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index. js', output: { filename: 'built. js', path: resolve(__dirname, 'build') }, module: { //loader配置 }, plugins: [ //plugins的配置 //html-webpack-plugin //功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(js/css) //需求:需要有结构的HTML文件 new HtmlWebpackPlugin({ // 复制',/src/ index.htm1’文件,并自动引入打包输出的所有资源(js/css) template: './src/index.html' }); ], //模式 mode: 'development' } -
打包图片资源
module.exports = { ... module: { rules: [ { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }, { //处理图片资源 //问题： 默认处理不了html中的图片 test: /\.(jpg|png|gif)$/, // 使用一个loader // 下载 url-loader file-loader loader: 'url-loader', options: [ //图片大小小于8kb，就会被base64处理 //优点: 减少请求数量(减轻服务器压力) //缺点：图片体积增大（文件请求速度更慢）因为这里小于8kb，所以及时体积增大，也不会太明显 //base64在客户端本地解码所以会减少服务器压力,如果图片过大还继续采用base64编码会导致cpu调用率上升网页加载时变卡 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]' ] }, { test: /\.html$/, //处理html中的img图片（负责引入img，从而能被url-loader进行处理） loader: 'html-loader' } ] } ... } -
打包其他资源
const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index. js',
output: {
filename: 'built. js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
//打包其他资源(除了html/js/css资源以外的资源)
{
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
});
],
//模式
mode: 'development'
}
开发服务器 devServer
每次编写完代码需要重复打包，过程过于繁琐，
所以有了devServer，用于自动化，帮助我们自动编译，自动打开浏览器，自动刷新浏览器
特点:只会在内存中编译打包，不会有任何输出（不会生成一个打包后的文件夹，编译打包在内存中进行，类比vue脚手架中保存文件和打包项目的区别）
启动devServer指令为: npx webpack-dev-server（启动前需要使用npm安装webpack-dev-server）
module.exports = {
...
devServer: {
//构建后的路径
contentBase: resolve(__dirname, 'bulid'),
//启动gzip压缩
compress: true,
//启动服务器端口号
port: 3000,
//自动打开浏览器
open: true
}
...
}
开发环境配置
基本配置
运行项目指令:
-
webpack 会将打包结果输出出去
-
npx webpack- dev-server只会在内存中编译打包，没有输出
const resolve = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bulit.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
user: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.css$/,
user: ['style-loader', 'css-loader']
},
{
//处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8*1024,
name: '[hash:10].[ext]',
esModule: false
}
//在build文件夹中分类，图片资源统一放在build/imgs的文件夹中
outputPath: 'imgs'
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
//处理其他资源
exclude: /\.(html|css|js|less|jpg|png|gif)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
},
//在build文件夹中分类，其他资源统一放在build/media的文件夹中
outputPath: 'media'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
});
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'bulid'),
compress: true,
port: 3000,
open: true
}
}
提取css成单独文件
使用mini-css-extract-plugin将css提取为单独文件
安装mini-css-extract-plugin
npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
//取代style-loader
//作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
'css-loader'
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
//对输出的css重命名
filename: 'css/built.css'
});
]
...
}
css兼容性处理
postcss
- postcss- loader
- postcss-preset-env
安装
npm i postcss-loader postEss-preset-env -D
使用
帮postcss找到package . json中browserslist里面的配置，通过配置加载指定的css兼容性样式
在package.json中进行配置
"browserslist": {
//开发环境-->设置node环境变量: process.env.NODE_ENV = developement
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
//生产环境:默认是看生产环境
"production": [
">0.2%",
"not dead" ,
"not op_ mini all"
]
}
webpack.config.js
//设置nodejs环境变量
process.env.NODE_ENV = 'development';
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
user: [
//取代style-loader
//作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
'css-loader',
//使用loader的默认配置
//'postcss-loader'
//修改loader的配置
{
loader: 'postcss-loader',//如果只写这句话相当于使用的默认配置，和上面直接写'postcss-loader的结果是一致的
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require ('postcss-preset-env')()
]
}
}
]
},
]
}
...
}
压缩css
安装
npm i optimize-css-assets -webpack-plugin -D
使用
const OptimizeCssAssetsWebpackPlugin = require ('optimize-css-assets-webpack-plugin')
module.exports = {
...
plugins: [
//压缩css
new OptimizeCssAssetsWebpackPlugin();
]
...
}
js语法检查
1.语法检查: eslint- loader eslint
注意:只检查自己写的源代码，第三方的库是不用检查的
2.设置检查规则:
package . json中eslintConfig中设置
airbnb
- eslint-config-airbnb-base
- eslint-plugin-import
- eslint
安装
npm i eslint-loader eslint eslint-config- airbnb-base eslint -plugin- import -D
package.json (也可以选择新建一个.eslintrc，在里面进行配置)
"eslintConfig": {
//设置检查规则，继承于airbnb
"extends": "airbnb-base"
}
webpack.config.js
module.exports = {
...
module: {
rules: [
{
test:/\.js$/,
exclude: /node_ modules/ ,
loader: ' eslint-loader',
options: {
//自动修复eslint的错误
fix: true
}
}
]
}
...
}
js兼容性处理
1.基本js兼容性处理–> @babel/ preset-env
将部分es6语法转化为es5的语法
- babel- loader
- @babel/ preset -env
- @babel/core
安装
npm i babel-loader @babel/preset-env @babel/core -D
问题
只能转换基本语法，如promise不能转换
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
//预设:指示babel做怎么样的兼容性处理
presets:[' @babel/ preset-env']
}
}
]
}
...
}
2.全部js兼容性处理–> @babel/polyfill
安装
npm i @babel/polyfill -D
不需要配置loader，在js文件中直接引用即可
问题
我只要解决部分兼容性问题，但是@babel polyfill 将所有兼容性代码全部引入，会导致项目体积过大
3.需要做兼容性处理的就做：按需加载， core-js
安装
npm i core-js -D
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
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代码
module.exports = {
..
//生产环境下会自动压缩js代码
mode: 'production'
..
}
压缩html
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
//压缩
minify: {
// 移除空格
collapseWhitespace: true,
//移除注释
removeComments: true
}
})
]
...
}
生产环境的配置
const resolve = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require ('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
//定义nodejs环境变量:决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production'
//复用loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: [
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
]
}
]
module.exports = {
entry: './src/index. js',
output: {
filename: 'built. js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [...commonCssLoader]
}，
{
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
}
},
{
//在package.json中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
options: {
useBulit: 'usage',
corejs: {version: 3},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8*1024,
name: '[hash:10].[ext]',
output: 'imgs'
},
esModule: false
},
{
test: /\.html$/,
loader: 'html-loader',
options: {
limit: 8*1024,
name: '[hash:10].[ext]',
output: 'imgs'
}
},
{
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
// 移除空格
collapseWhitespace: true,
//移除注释
removeComments: true
}
})
],
//模式
mode: 'development'
}