window启动webpack打包的三种方法
程序员文章站
2022-05-18 21:05:05
1.在cmd终端执行 npx webpack命令 2.在package.json文件同级建立webpack.config.js文件,内容如下: const path = require('path'); module.exports = { entry: './src/index.js', // 入 ......
1.在cmd终端执行 npx webpack命令
2.在package.json文件同级建立webpack.config.js文件,内容如下:
const path = require('path'); module.exports = { entry: './src/index.js', // 入口 output: { // 出口 filename: 'bundle.js', // 文件名 path: path.resolve(__dirname, 'dist') // 生成路径 } };
执行命令 npx webpack --config webpack.config.js
3.修改package.json脚本
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"error: no test specified\" && exit 1", + "build": "webpack" // 修改命令执行方法 }, "keywords": [], "author": "", "license": "isc", "devdependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9", "lodash": "^4.17.5" } }
执行命令npm run build
结论:生成类似下面的目录,打开index.html 有hello webpack显示
webpack-demo |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- index.js |- /node_modules