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
constpath=require('path');
constMineCssExtractPlugin=require('mini-css-extract-plugin')
constHtmlWebpackPlugin=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:[
newMineCssExtractPlugin({
filename:'[name].css'
}),
newHtmlWebpackPlugin({
template:'./index.html',
filename:'index.html',
chunks:['main']
})
]
}
运行
npx webpack
