Webpack5 第二节
Webpack配置文件
在上面我们使用了npx webpack ./src/index.js -o ./dist --mode=development进行对项目的打包，但是这是否太长了。这时候我们就需要简化我们的命令行的选项，就使用到了我们的webpack配置文件。
首先我们要创建webpack.config.js
const {resolve} = require('path')
module.exports ={//打包环境配置mode: 'development',//入口文件entry: './src/index.js',//输出文件output: {path: resolve(__dirname, 'dist'),filename: 'main.js'},
}然后执行以下命令即可快速打包
npx webpack同时我们还可以在package.json里面添加脚本执行快速打包
添加这个命令之后，可以使用以下命令进行打包
npm run build自动生成HTML文件和指定模版
生成一个html模版，并添加以下内容，在浏览器上打开可以看见输出结构
那我们该怎么自动生成html文件，这时候就需要用到html-webpack-plugin插件。该插件可以生成一个html文件，并在html中加载所有打包资源，便于服务器访问。
安装插件：
cnpm i html-webpack-plugin -D在webpack.config.js里面的插件中添加html打包插件
//插件配置plugins: [new HtmlWebpackPlugin()],最后执行npm run build 发现出现了html的打包文件
指定生成html模板
//插件配置plugins: [new HtmlWebpackPlugin({template: './src/index.html', filename: 'index.html',title: 'webpack-demo'})],但是我们发现其打包的html中的title标签并没有发送改变，如果需要其title标签发送更改的话需要使用EJS语法（也就是js的模版引擎）
<title><%=htmlWebpackPlugin.options.title%></title>
打包多个HTML页面和压缩
在html标签中编写以下内容，进行跳转设置
<body><div>小滴课堂</div><a href="index.html">首页</a><a href="mine.html">我的</a>
</body>
在webpack.config.js中添加这个内容
//插件配置plugins: [new HtmlWebpackPlugin({template: './src/index.html', filename: 'index.html',title: '首页'}),new HtmlWebpackPlugin({template: './src/index.html', filename: 'mine.html',title: '我的'})],然后执行打包命令。
压缩
plugins: [new HtmlWebpackPlugin({template: './src/index.html', filename: 'index.html',title: '首页',minify: { //压缩htmlcollapseWhitespace: true, //去掉空格removeComments: true, //去掉注释removeAttributeQuotes: true //去掉属性引号}}),new HtmlWebpackPlugin({template: './src/index.html', filename: 'mine.html',title: '我的',})
],
CSS打包原理
css-loader，可以将css代码转为js代码，并合并到打包的js文件中
style-loader，可以将包含css内容的js代码，插入到html中style标签中
安装插件
cnpm i css-loader style-loader -D
配置打包插件
// 模块配置
module: {rules: [// 配置多个模块规则（配置loader、解析器等选项）{// 匹配css文件test: /\.css$/i,// 指定加载器，加载顺序是从左到右或者是从下到上use: ['style-loader', 'css-loader'],},],
},CSS代码抽离成单独文件
当我们运行时候有没有相关这个问题，如果我们的css过大是不是也会减少我们项目的运行速度，这时候就需要用到mini-css-extract-plugin，其可以将js文件中抽离出来css代码，减少js文件的体积；并且当js文件比较大的时候，可以避免阻碍页面的渲染，提升渲染速度。
安装插件
cnpm i mini-css-extract-plugin -D配置插件
//引入
const MiniCssExtractPlugin=require('mini-css-extract-plugin')//loader配置（替换style-loader）
use:[MiniCssExtractPlugin.loader,'css-loader']//实例化插件
new MiniCssExtractPlugin({filename:'./css/main.css'
})
打包CSS预编译语言
css预编译语言主要有三个
- less
cnpm install less less-loader -D- sass
cnpm install node-sass sass-loader -D- stylus
cnpm install stylus stylus-loader -D这次我们主要是进行less进行演示：
首先我们需要在index.js文件中引入该模块
首先在webpack配置文件中配置规则
module: {rules: [{test: /\.less$/i,use: ['style-loader', 'css-loader', 'less-loader'],},],
},我们需要创建一个main.less文件
@color:red;html,body{background: @color;
}然后更改入口文件index.js
import './css/main.less'对特殊CSS样式添加前缀
对于不同的浏览器有不一样的规则，所以为了兼容各个浏览器，我们需要安装一些插件方便我们在不同的浏览器上进行运行。
安装插件
cnpm i postcss-loader autoprefixer -D配置插件，在文件的根目录下创建一个postcss.config.js文件
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader' // 处理css兼容
]在package.json添加以下内容
"browserslist":["last 2 version", "> 1%" ],打包后出现这样的结果，加上了浏览器前缀
CSS压缩
安装插件
cnpm i optimize-css-assets-webpack-plugin -D在webpack.config.js中插件配置
// 引入
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')//配置
plugins: [new OptimizeCssAssetsPlugin(),
],