1 安裝工程
- 1.1 創(chuàng)建工程 webpack-demo 文件夾
- 1.2 進(jìn)入工程目錄甘改，使用默認(rèn)配置進(jìn)行初始化生成 package.json 文件
cd webpack-demo
npm init -y
// Terminal 終端輸出
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- 1.3 安裝 webpack
npm install --save webpack
// --save 會(huì)將 *生產(chǎn)模式* 的依賴(lài)寫(xiě)入 package.json 文件
"dependencies": {
"webpack": "^3.5.5"
}
npm install --save-dev path
// --save-dev 會(huì)將 *開(kāi)發(fā)模式* 的依賴(lài)寫(xiě)入 package.json 文件
"devDependencies": {
"path": "^0.12.7"
}
// npm install 直接安裝依賴(lài)，不寫(xiě)入 package.json 文件
1.4 創(chuàng)建一個(gè) bundle 文件
創(chuàng)建 app 文件夾腿倚，存放用于書(shū)寫(xiě)和編輯的代碼
創(chuàng)建 public 文件夾撩银，存放構(gòu)建過(guò)程產(chǎn)生的代碼最小化和優(yōu)化后的“輸出”目錄鄙信，最終將在瀏覽器中加載1.5 使用 bundle 文件
// Terminal 中斷輸入命令行
./node_module/.bin/webpack ./app/index.js ./public/bundle.js
2 通過(guò)配置文件使用 Webpack
.\node_modules.bin\webpack
自動(dòng)引用 webpack.config.js 文件中的配置選項(xiàng)
module.exports = {
entry: __dirname + '/app/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
}
}
__dirname: 總是返回被執(zhí)行的 js 所在文件夾的絕對(duì)路徑
__filename: 總是返回被執(zhí)行的 js 的絕對(duì)路徑
process.cwd(): 總是返回運(yùn)行 node 命令時(shí)所在的文件夾的絕對(duì)路徑
插件（Plugins）
插件（Plugins）是用來(lái)拓展Webpack功能的驹碍，它們會(huì)在整個(gè)構(gòu)建過(guò)程中生效柳琢，執(zhí)行相關(guān)的任務(wù)。
Webpack 有很多內(nèi)置插件盅抚，同時(shí)也有很多第三方插件
html-webpack-plugin
HMR (Hot Module Replacement)
TODO
開(kāi)發(fā)中 Server (DevServer)
動(dòng)態(tài)打包 (dynamically bundle)
可能出現(xiàn)的報(bào)錯(cuò)
Cannot assign to read only property 'exports' of object '#<Object>'
原因是：The code above is ok. You can mix require and export. You can't mix import and module.exports.
在webpack打包的時(shí)候漠魏，可以在js文件中混用require和export。但是不能混用import 以及module.exports
比如混用 import _ from 'lodash' 和 module.exports妄均，這種寫(xiě)法會(huì)報(bào)錯(cuò)柱锹。可以使用 var _ = require('lodash') 和 module.exports
