1.新建文件夹 然后npm init - y
2.新建src文件,该文件夹下存放你要打包的文件
3.在项目根目录下安装webpack (npm i -D webpack webpack-cli)
4.项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件
5.webpack.config.js文件内容
var path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "./src/js/main.js"),
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js",
clean: true,
},
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.(png|jpg|jpeg|gif|webp)$/i,
type: "asset/resource",
generator: {
filename: "img/[name][ext]",
},
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: 3,
targets: {
chrome: "60",
firefox: "60",
ie: "9",
safari: "10",
edge: "17",
},
},
],
],
},
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"],
},
],
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
}),
],
devServer: {
static: "./src",
open: true,
host: "local-ip",
proxy: {
"/shop": "请求地址",
},
},
};
6.package.json文件内容
{
"name": "shopping",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"serve": "webpack serve --mode=development",
"test": "echo \"Error: no test specified\" && exit 1",
"build:dev": "webpack --mode development",
"build:prod": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"autoprefixer": "^10.4.14",
"babel-loader": "^9.1.2",
"browserlist": "^1.0.1",
"core-js": "^3.27.2",
"css-loader": "^6.8.1",
"html-webpack-plugin": "^5.5.0",
"node-sass": "^6.0.1",
"postcss-loader": "^7.3.3",
"sass-loader": "^10.0.0",
"style-loader": "^3.3.3",
"terser-webpack-plugin": "^5.3.6",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"file-loader": "^6.2.0",
"html-loader": "^4.2.0"
},
"broserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}