上文，介绍了webppack配置的基本的配置，包括webpack.config.js文件的配置，html-webpack-plugin,clean-webpack-plugin等插件的使用，今天我要想办法使得我们的配置文件变得健壮起来。
css-loader
首先我们对应css文件，目前的还无法打包，需要使用css-loader来进行打包，但是这里有个坑，使用css-loader只能将css文件变成数组，还是一堆js，并不能处理，我们需要加载style-loader来把数组变成一个style标签放在页面上。于是代码如下
yarn add css-loader style-loader -D
webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /.css$/i,
use: ["style-loader", "css-loader"],
},
]
},
}
这里其实也分开发环境和生产环境，如果是生产环境，更加建议用mini-css-extract-plugin
yarn add css-loader mini-css-extract-plugin
webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
...
module: {
rules: [
{
test: /.css$/i,
use:[ MiniCssExtractPlugin.loader , "css-loader"],
},
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html"
}),
new MiniCssExtractPlugin({ //注意这里一定要放在htmlwebpackplugin之后，不然都没有生成HTML,css将无处安放
filename: 'css/[name].[contenthash:8].css',
}),
...
]
}
postcss-loader （兼容你的css）
现在写的css面对多个浏览器，有时候会出现各种不兼容的问题，于是postcss-loader应运而生
yarn add postcss-preset-env postcss-loader -D
webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /.css$/i,
use:[
MiniCssExtractPlugin.loader ,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
['postcss-preset-env',{stage: 3}]
]
}
}
}
],
},
]
},
}
package.json
"browserslist": [ //这边自己写，爱配置啥浏览器配啥
">0.2%",
"last 4 versions",
"Firefox ESR",
"not ie < 9"
]
预处理器（less,sass）
现在的开发，没人用css了,这边给常用的两种css预处理器的webpack兼容方式 之前写的css配置已经很多了，先把它们提取出来
const cssLoader = ()=>{
return [MiniCssExtractPlugin.loader....]
}
less
yarn add less-loader less -D
webpack.config.js
module.exports = {
...
module:{
rules:[
...
{
test: /.less$/i,
use: [
...cssLoader(),
'less-loader'
]
}
]
}
}
sass
sass一定不要用node-sass，又慢bug又多，用dart-sass，vue-cli,webpack也是这么推荐的
yarn add sass-loader sass dart-sass -D
webpack.config.js
module.exports = {
...
module:{
rules:[
...
{
test: /.s[ac]ss$/i,
use: [
...cssLoader(),
'sass-loader'
]
}
]
}
}
这样整个css的部署大概是说完了，我们的项目也兼容了css。
webpack-dev-server(快速开发)
到目前为止，我们的程序全都是在本地打包完成之后，再打开生成的html查看效果，这使得很慢，所以我们要改进。webpack-dev-server是一个开启在缓存中的服务，每当代码改变的时候，系统会很快的在内存中重新打包并且开启服务，几乎是开发的必备。这里我们开启热更新 + 热替换
yarn add webpack-dev-server
webpack.config.js
module.exports = {
...
devServer: {
port:'8080',
hot: true, //开启热更新
compress:true, //开启压缩
open:true //每次打开webpack的时候就能打开页面
}
}
总结
现在我们已经拥有了webpack的css的操作，webpack-dev-server的配置，下一步我们要对webpack不同的生产环境做不同的配置以及压缩，还有就是对Js的处理，也就是babel的详细讲解，给上目前为止我的所有代码
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const cssLoader = ()=>{
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{stage: 3}
]
]
}
}
}
]
}
module.exports = {
mode: 'development',
entry: './src/index.js', //webpack入口
output: {
path: path.resolve(__dirname, 'build'),
filename: "js/[name].[contenthash:8].js"
},
module: {
rules: [
{
test: /.css$/i,
use: cssLoader()
},
{
test: /.less$/i,
use: [
...cssLoader(),
'less-loader'
]
},
{
test: /.s[ac]ss$/i,
use: [
...cssLoader(),
'sass-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html"
}),
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
}),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, './public'),
to: path.resolve(__dirname, './build'),
globOptions: {
ignore: [
'**/index.html'
]
}
}
]
}),
],
devServer: {
port:'8080',
hot: true, //开启热更新
compress:true, //开启压缩
open:true //每次打开webpack的时候就能打开页面
}
}
package.json
{
"name": "vue-webpack",
"version": "1.0.0",
"main": "index.js",
"author": "xiaoznz",
"license": "MIT",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.5.1",
"dart-sass": "^1.25.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"mini-css-extract-plugin": "^2.4.3",
"postcss-loader": "^6.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.43.4",
"sass-loader": "^12.3.0",
"style-loader": "^3.3.1",
"webpack": "^5.61.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
},
"browserslist": [
">0.2%",
"last 4 versions",
"Firefox ESR",
"not ie < 9"
]
}
