一、基础打包
1.1 创建项目目录,使用npm init初始化
mkdir webpack-demo && cd webpack-demo
npm init
初始化完成后,目录下会生成package.json
1.2 按照 webpack 4以上还需要安装webpack-cli
npm install --save-dev webpack webpack-cli
1.3 直接运行命令
webpack "js文件名"
二、配置打包
2.1 添加webpack.config.js文件
const path = require("path");
module.exports = {
mode: "development", //打包为开发模式
// 入口配置的对象中,属性为输出的js文件名,属性值为入口文件
entry: {
app1:"./app1.js",
app2:"./app2.js",
app3:"./app3.js",
}, //入口文件,从项目根目录指定
output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
path: path.resolve(__dirname, "./dist/js"), //将js文件打包到dist/js的目录
filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
}
}
2.2 直接运行命令
webpack --config webpack.config.js
或者把命令封装到package.json文件里
{
"name": "js",
"version": "1.0.0",
"description": "",
"main": "app1.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --config webpack.config.js"//命令的添加
},
"author": "",
"license": "ISC"
}
最后直接运行
npm run build