打包html文件:

安装html-webpack-plugin模块

npm install html-webpack-plugin --save-dev

webpack.config.js配置文件：

打包单个html文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},devServer: {static: "./src",open: true,hot: true,hot: true,port: "3301",host: "127.0.0.1",},plugins: [new htmlWebpackPlugin({minify: {collapseWhitespace: true, //清除空格removeAttributeQuotes: true, //清除多余引号removeComments: true //删除注释},template: path.resolve(__dirname, "./src/index.html"),filename: "index.html",}),],
};

 打包多个html文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},devServer: {static: "./src",open: true,hot: true,hot: true,port: "3301",host: "127.0.0.1",},plugins: [new htmlWebpackPlugin({minify: {collapseWhitespace: true, //清除空格removeAttributeQuotes: true, //清除多余引号removeComments: true //删除注释},template: path.resolve(__dirname, "./src/index.html"),filename: "index.html",},{minify: {collapseWhitespace: true, //清除空格removeAttributeQuotes: true, //清除多余引号removeComments: true //删除注释},template: path.resolve(__dirname, "./src/index2.html"),filename: "index2.html",}),],
};

 使用npm run dev来打包启动项目

打包css文件:

安装style-loader和css-loader模块

npm install style-loader css-loader --save-dev

webpack.config.js配置文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},devServer: {static: "./src",open: true,hot: true,hot: true,port: "3301",host: "127.0.0.1",},plugins: [new htmlWebpackPlugin({minify: {collapseWhitespace: true,removeAttributeQuotes: true,removeComments: true,},template: path.resolve(__dirname, "./src/index.html"),filename: "index.html",}),],module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],}],},
};

使用npm run dev来打包启动项目

打包less文件：

安装style-loader和css-loader模块

npm install style-loader css-loader --save-dev

安装less-loader和less模块

npm install less-loader less --save-dev

webpack.config.js配置文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},devServer: {static: "./src",open: true,hot: true,hot: true,port: "3301",host: "127.0.0.1",},plugins: [new htmlWebpackPlugin({minify: {collapseWhitespace: true,removeAttributeQuotes: true,removeComments: true,},template: path.resolve(__dirname, "./src/index.html"),filename: "index.html",}),],module: {rules: [{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],}],},
};

使用npm run dev来打包启动项目

打包sass文件

安装style-loader和css-loader模块

npm install style-loader css-loader --save-dev

安装sass-loader和node-sass模块

npm install sass-loader node-sass --save-dev

webpack.config.js配置文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},devServer: {static: "./src",open: true,hot: true,hot: true,port: "3301",host: "127.0.0.1",},plugins: [new htmlWebpackPlugin({minify: {collapseWhitespace: true,removeAttributeQuotes: true,removeComments: true,},template: path.resolve(__dirname, "./src/index.html"),filename: "index.html",}),],module: {rules: [{test: /\.scss$/,use: ["style-loader", "css-loader", "sass-loader"],},],},
};

使用npm run dev来打包启动项目

同时打包html和css、less、sass文件

安装html-webpack-plugin模块

npm install html-webpack-plugin --save-dev

 安装style-loader和css-loader模块

npm install style-loader css-loader --save-dev

 安装less-loader和less模块

npm install less-loader less --save-dev

 安装sass-loader和node-sass模块

npm install sass-loader node-sass --save-dev

webpack.config.js配置文件：

var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},devServer: {static: "./src",open: true,hot: true,hot: true,port: "3301",host: "127.0.0.1",},plugins: [new htmlWebpackPlugin({minify: {collapseWhitespace: true,removeAttributeQuotes: true,removeComments: true,},template: path.resolve(__dirname, "./src/index.html"),filename: "index.html",},{minify: {collapseWhitespace: true,removeAttributeQuotes: true,removeComments: true,},template: path.resolve(__dirname, "./src/index2.html"),filename: "index2.html",}),],module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.scss$/,use: ["style-loader", "css-loader", "sass-loader"],},],},
};

使用npm run dev来打包启动项目