概念 | webpack 中文文档
1,package.json
{
"name": "code1",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"css-loader": "^6.7.2",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0"
},
"dependencies": {
"jquery": "^3.6.1"
},
"scripts": {
"build": "webpack"
}
}
2,创建webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [new HtmlWebpackPlugin({
template: './index.html'
})],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
]
},
],
},
};