webpack

webpack笔记

## 五大核心
1.entry 入口 webpack以哪个文件作为入口开始打包
单入口,使用字符串指定一个入口文件，打包一个chunk,输出bundle,chunk名称可以默认
多入口entry:[ " “,” “] 数组写法
多入口entry:{
one:’./src/index.js’,
two:’./src/main.js’
} 有几个入口文件就会生成几个chunk,并输出几个bundle,chunk的名称是one，two 此时 output:{ filename:”[name].js"}
导出output
引入const { resolve } = require(‘path’)
output: {
filename: ‘[name].js’, 默认文件名
path: resolve(__dirname, ‘build’) 路径
},
插件的使用plugin
安装 npm i html-webpack-plugin -D
在webpack.config.js引入const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

打包html资源
安装 npm i html-webpack-plugin -D
引入插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’, //使用这个模板
filename: ‘index.html’, //文件名称
minify:{
//移除空格
collapseWhitespace:true,
//移除注释
removeComments:true
}
})
]
如图

webpack打包css资源
安装npm i css-loader style-loader -D
使用 module: {
rules: [{
text:/.css$/,
use: [‘style-loader’, ‘css-loader’]
}]
}
主入口使用require(’./style.css’)
css-loader 打包到js里面 style-loader 插入到html里面去
执行顺序是 从右到左

webpack打包less或sass资源
安装 npm i less less-loader -D 开发时候用 --save-dev
使用 module: {
rules: [
{
test: /.less$/,
use: [‘style-loader’, ‘css-loader’, ‘less-loader’]
}
]
}
主入口引用require(’./lessstyle.less’)

sasss 安装

npm i node-sass sass-loader -D
module: {
rules: [
{
test:/.scss＄/,
use: [‘style-loader’, ‘css-loader’, ‘sass-loader’]
}
]
}
主入口引用require(’./stylesass.scss’)

提取css为单独的文件

安装 npm i mini-css-extract-plugin -D
引入插件 在webpack.config.js文件中引入
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
使用
plugins: [
new MiniCssExtractPlugin({
filename: ‘demo.css’
})
]
rules: [{
test: /.cssm＄/,
use: [MiniCssExtractPlugin.loader, ‘css-loader’]
}

处理css兼容性

（本人不好使）
使用postcss处理 需要下载二个包 post-loader 和 postcss-preset-env
安装 npm i post-loader postcss-preset-env -D 只在开发时候用
rules: [{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, ‘css-loader’, ‘postcss-loader’]
}
新建个文件 postcss.config.js
module.exports = {
plugins: [require(‘postcss-preset-env’)()]
}
在package.json
找到支持的浏览器列表
“browserslist”:[
“>0.2%”,
“last 2 versions”,
“not dead”
]

处理css兼容性

1、 安装 npm i postcss-loader -D
在安装 npm install autoprefixer -D
2、 新建postcss.config.js文件（与package.json同级）
module.exports = {
plugins: [
require(‘autoprefixer’)
]
}
3、webpack.config.js 中

4、还需要在 package.json中设置 browserslist，与 “devDependencies” 同级
“browserslist”: [
“last 2 versions”,
“> 1%”,
“iOS 7”,
“last 3 iOS versions”
]

压缩css

安装 npm i optimize-css-assets-webpack-plugin -D
引入 在webpack.config.js
const OptimizeCssAssetsWebpackPlugin =
require(‘optimize-css-assets-webpack-plugin’)
使用 plugins:[
new OptimizeCssAssetsWebpackPlugin()
]

webpack打包图片资源 css

安装 npm i url-loader file-loader -D

使用 module.exports = {
module: {
rules: [
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192
}
}
]
}
]
}
}

webpack打包html图片

npm i html-loader -D
{
test: /.html$/,
loader: ‘html-loader’
}
本人报错

开发服务器devServer配置

安装 npm i webpack-dev-server -D
运行 npx webpack serve
自动打包运行
在webpack5版本加上这个配置可以自动刷新
target:“web”,

npx webpack serve --port 3000 改变端口

package.json 文件 “scripts”{
运行环境打包
“dev”: "webpack serve --mode development ",
开发环境打包
“build”: “webpack --mode production”
}

webpack.config.js文件中 配置
devServer: {
端口号
port: 3001,
打包时候压缩
compress: true,
自动打开浏览器
open: true，
热更新
hot:true
}

环境的优化

开发环境优化
HRM 热替换
生产环境优化

webpack总结