1、html-webpack-plugin插件

1、下载插件

yarn add html-webpack-plugin -D

2、webpack.config.js添加配置

*const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');module.exports = {entry: 'index.js',output: {path: path.resolve(__dirname, './dist'),filename: 'index_bundle.js',},plugins: [new HtmlWebpackPlugin()],
};

webpack 默认只能打包js文件 css文件需要下载插件打包

2 、css-loader和style-loader插件

1、下载插件

yarn add css-loader style-loader -D

2、webpack.config.js配置

module.exports = {module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"],},],},
};

3、less-load插件

1、下载插件

yarn add less-load -D

2、webpack.config.js配置

const HtmlWebpackPlugin = require('html-webpack-plugin');const path = require('path')module.exports = {entry:'./src/main.js', //入口output:{path:path.resolve(__dirname,'dist'),// 出口路径文件夹的名字filename:'bundle.js' //出口文件的名字 代码打包进这里},plugins: [new HtmlWebpackPlugin({ //pluginstemplate:'./public/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',],}],}}

参考文献：https://www.webpackjs.com/loaders/less-loader/#root