1安装依赖
-
less less 的运行环境
-
less-loader 将less编译为 css 的loader
-
css-loader 让js解析css代码 mport/require()
-
style-loader 把css插入到dom中
-
mini-css-extract-plugin 将css离提取到单独的文件
-
html-webpack-plugin 打包编译html文件
-
babel-loader 在webpack中使用bable工具
-
@babel/presets-env babel的预设
-
@babel/core babel的环境
-
webpack
-
webpack-cli
npm i --save-dev less less-loader css-loader style-loader mini-css-extract-plugin html-webpack-plugin babel-loader @babel/presets-env @babel/core webpack webpack-cli
创建webpack.config.js
module.exports= {
mode:'development',
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
}
}
配置 loader
const path = require('path');
const MineCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports= {
mode:'development',
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
},
module:{
rules:[
{
test:/\.less$/i,
exclude: /(node_modules|bower_components)/,
use:[
MineCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
},
plugins:[
new MineCssExtractPlugin({
filename:'[name].css'
}),
new HtmlWebpackPlugin({
template:'./index.html',
filename:'index.html',
chunks:['main']
})
]
}
运行
npx webpack