先用npm init -y，快速生成package.json文件，package-lock.json文件是用来固化依赖包的版本的，导入包后会自行生成，提交给他人项目时，只需要给这两个配置文件，然后输入npm i，即可自动下载依赖。
新建一个webpack.config.js配置文件，以下是配置文件的信息，之后输入自定义的命令npm run build（以下代码自定义名字用的就是build）即可。
中途需要导入依赖包
--save-dev：在开发环境中应用，运行环境中不引入
npm i webpack webpack-cli --save-dev //webpack基础依赖包，默认只打包js文件
npm i npm i html-webpack-plugin --save-dev //需要打包html文件时的依赖包
npm i style-loader css-loader --save-dev //需要打包css文件时的依赖包
npm i mini-css-extract-plugin --save-dev //想将css文件另外导入，而不是打包后直接和js文件合并，则用该依赖代替style-loader依赖
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: path.resolve(__dirname,'src/login/index.js'),//打算打包的js文件位置
output: {
path: path.resolve(__dirname, 'dist'),//想把js文件打包到哪个路径下
filename: './login/index.js',//js文件具体文件名
clean:true //设置后可以将path下的文件全部清空再重新打包
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/login.html'),//打算打包的html文件位置
filename: "login.html" //html文件具体文件名
}),
new MiniCssExtractPlugin() //想将css独立打包的依赖的配置
],
module: {
rules: [
{
test: /\.css$/i,//i代表无论大小写
// use: ['style-loader','css-loader']
use: [MiniCssExtractPlugin.loader,'css-loader']//如果不想将js和css文件凑一起，就用这个，而不用上面被注释的配置
},
],
},
};