什么是Webpack
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
1.在cmd終端執(zhí)行 npx webpack命令
2.在package.json文件同級(jí)建立webpack.config.js文件，內(nèi)容如下：
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口
output: { // 出口
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 生成路徑
}
};
執(zhí)行命令 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" // 修改命令執(zhí)行方法
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
執(zhí)行命令npm run build
結(jié)論：生成類(lèi)似下面的目錄，打開(kāi)index.html 有Hello webpack顯示
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules
總結(jié)
以上所述是小編給大家介紹的window啟動(dòng)webpack打包的三種方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
您可能感興趣的文章:- 詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目
- 使用webpack打包后的vue項(xiàng)目如何正確運(yùn)行（express）
- 詳解webpack打包nodejs項(xiàng)目(前端代碼)
- webpack4打包vue前端多頁(yè)面項(xiàng)目
- 詳解使用webpack+electron+reactJs開(kāi)發(fā)windows桌面應(yīng)用
- 詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(四) 路由vue-router的使用
- 詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
- 詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
- windows下vue-cli及webpack搭建安裝環(huán)境
