共计 字 • 阅读约
min
全局安装 webapck 和 Webpack-cli
npm i webpack webpack-cli -g
安装完后,输入 webpack -v
,能看到正确的版本就对了
webpack -v
# webpack-cli 4.2.0
# webpack 5.6.0
初始化一个项目
初始化项目,生成一个 package.json,新增一条 npm 脚本 build
npm init -y
{
"name": "previwe-image-plagin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
配置 Webpack
新建 webpack.config.js
const { resolve } = require('path')
const config = {
mode: 'production',
entry: './index.js', // 入口文件路径
output: {
filename: 'index.js', // 输出文件名
path: resolve(__dirname, 'dist') // 输出文件路径
}
}
module.exports = config
运行打包
直接在终端输入 npm run build
就可了,打包成功后,会生成一个 dist 文件夹,里面的文件就是打包后的代码
文章更新于: 2021-5-5 0:20:21