# `webpack`結合`npm scripts`
我們后面會不斷的修改項目文件，每次修改完要重新執行`webpack src/main.js -o dist/bundle.js`命令。感覺 命令比較長，比較繁瑣。
## 安裝本地項目依賴
>[success] 因為一個項目往往依賴特定的webpack版本，全局的版本可能很這個項目的webpack版本不一致，導出打包出現問題。
> 所以通常一個項目，都有自己局部的webpack。
`npm install webpack webpack-cli -D`
~~~
{
"name": "demo1",
"version": "1.0.0",
"dependencies": {
"jquery": "^3.4.1"
},
"devDependencies": {
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5"
}
}
~~~
## npm scripts
我們可以結合`npm scripts`來方便我們書寫命令。修改`package.json`文件如下：
~~~
{
"name": "demo1",
"version": "1.0.0",
"scripts": {
"start": "webpack src/main.js -o dist/bundle.js"
},
"dependencies": {
"jquery": "^3.4.1"
},
"devDependencies": {
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5"
}
}
~~~
## 啟動命令
`npm start 或者npm run start`
## 解釋
`npm run xxx`
這其中的`xxx`就是我們在scripts中定義的key值。
這樣一句命令代表著我們將xxx的值執行。即執行`webpack src/main.js -o dist/bundle.js`。
這里面的`webpack`命令其實是利用的我們項目的開發環境的的`webpack-cli`模塊。如果本地項目未完裝`webpack`、`wepback-cli`則去找全局命令。
## 注意
> start這個命令可以省去run其它都不可以
## 問題
上面命令執行后是可以進行打包，不過會產生一個警告提示。按照提示添加mode屬性要么為production（生產環境）或者development 開發環境 。我們在這里了解一下開發環境。所以將mode屬性的值設置為development;
~~~
> demo1@1.0.0 start C:\Users\zhaoy\Desktop\react\01\demo1
> webpack src/main.js -o dist/bundle.js
Hash: 4e6df5b73ef9caaba844
Version: webpack 4.35.0
Time: 329ms
Built at: 2019-06-24 7:36:41 PM
Asset Size Chunks Chunk Names
bundle.js 87.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] ./src/main.js 106 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option t
o 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configurati
on/mode/
~~~
**修改npm scripts**
~~~
webpack src/main.js -o dist/bundle.js --mode development
~~~
~~~
{
"name": "demo1",
"version": "1.0.0",
"scripts": {
"start": "webpack src/main.js -o dist/bundle.js --mode development"
},
"dependencies": {
"jquery": "^3.4.1"
},
"devDependencies": {
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5"
}
}
~~~
## 項目源碼
`git clone https://github.com/highh5/webpack.git -b lesson-02`
