1.首先我们npm下载一些需要用到的插件资源。
npm i html-webpack-plugin -Dnpm i style-loader css-loader less-loader -D2.新建一些文件。
3.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 class="h3">hello</h3>
</body>
</html>4.index.less
h3{
color: aqua;
font-size: larger;
}5.index.js
import './index.less'
function reduce(x,y) {
return x-y;
}
console.log(reduce(3,1));6.最重要的就是配置了。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: resolve(__dirname, './dist'),
filename: 'bundle.js',
},
plugins: [
//自动打包所有资源,引入到dist文件夹中的index.html
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
},
mode: 'development'
};7.然后在终端输入webpack指令，就可以打包了，会生成dist文件夹。
8.运行index.html文件，会出现下面的结果。
