需求：項目是一套普通的靜態(tài)頁面由缆，不過因為要出七八套不同顏色的版本矩欠，不想手動修改，所以準備用webpack做個簡單的打包工具幌羞。
解決步驟：
1寸谜、初始化package.json，安裝依賴
npm init
npm install css-loader less less-loader mini-css-extract-plugin url-loader webpack webpack-cli -D
2属桦、新建webpack.config.js熊痴，配置如下
const resolve = require('path').resolve
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
'index' : __dirname + '/lessStyle/index.js',
'pay' : __dirname + '/lessStyle/pay.js'
// 因為mini-css-extract-plugin會把每個js中的css打包成一個文件他爸，所以這里新建了多個入口文件，打包多個css文件
},
output: {
path: resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test:/\.(jpg|png|gif)$/,
use:[{
// 處理css文件中引入的圖片
loader:"url-loader",
options:{
limit:50,
outputPath:"images", // 打包后文件相對dist文件夾的位置
publicPath:'../images', // 打包后css中圖片的引用路徑
name: '[name].[ext]' // 打包后的名字
}
}]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style/[name].css', // 打包后從js文件中提取出來的css文件名稱
}),
],
mode: 'development'
}
3果善、運行npx webpack诊笤，打包完成后在dist/style中達到相應(yīng)的css文件，完成巾陕。
ps：
附帶一些快速打包單個文件的命令：
1.命令行打包entry.js 到bundle.js
webpack src/entry.js -o dist/bundle.js --mode development
2讨跟、打包自動編譯sass文件
//安裝node-sass
npm i node-sass -g
npm i node-sass
//監(jiān)聽src文件夾下所有sass文件，并將文件打包到style文件夾中鄙煤。
node-sass -w -r src -o style
