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