一、工具準備
WebStorm - 下載
Nodejs - 下載
Chrome - 下載
下載并安裝以上工具
二、開發環境搭建
package.json項目打包配置文件
新建package.json文件
可以通過兩種方法新建package.json文件：
- 使用WebStorm打開對應項目，在項目根目錄，右鍵 - New - package.json File生成一個打包配置文件
package.json，應該類似以下結構：
package.json
{
"name":"項目名稱",
"version":"1.0.0",
"dependencies":{}
}
- 使用WebStorm打開對應項目，通過終端（Terminal）生成
package.json：
npm init -y
? 生出的文件應該類似以下結構：
package.json
{
"name": "項目名稱",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
以上兩種方式，建議用第2種方式創建
package.json文件。
package.json是打包配置文件，例如程序包需要包含哪些依賴工具，項目的名稱、項目版本號、項目描述等。
? 延伸閱讀
typescript工具包
安裝typescript
使用WebStorm打開對應項目，通過終端（Terminal）安裝typestcript：
npm install typestcript --save-dev
安裝typescript，這是后面我們需要安裝的tslint所要依賴的工具包。
? 延伸閱讀
?
--save-dev也可以簡寫成-D，如上面的安裝語句也可以寫成：?
npm install typestcript -D
新建tsconfig.json文件
可以通過兩種方法新建tsconfig.json文件：
- 使用WebStorm打開對應項目，在項目根目錄，右鍵 - New - tsconfig.json File生成一個TypeScript配置文件
tsconfig.json，應該類似以下結構：
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
- 使用WebStorm打開對應項目，通過終端（Terminal）生成
tsconfig.json，應該類似以下結構：
tsc --init
? 如果命令行提示找不到tsc命令的話，有以下兩種解決方案：
命令行進入
項目根目錄\node_modules\.bin，再次執行命令tsc --init；用這種方法，生成的tslint.json文件應該在
項目根目錄\node_modules\.bin路徑下，需要把文件移到項目根目錄全局安裝
typescript后，再次執行命令tsc --init，全局安裝typescript的命令為：
npm install typescript -g
? 用第2種方法生成完畢之后，在項目的根目錄應該多了一個文件tslint.json。
tsconfig.json是TypeScript的配置文件。
延伸閱讀
自動編譯typescript文件
- 進入File - Settings - Languages & Frameworks - TypeScript；
- 如字段
TypeScript出現紅色警告或為空，則將其改成項目路徑下的typescript工具包的路徑，路徑位置應該為項目根目錄\node_modules\typescript，如配置正確，在該輸入框后部會顯示typescript的版本號。 - 勾選
TypeScript Language Service，勾選Recompile on changes，（而其他TypeScript Language Service項目下的復選框根據自己需要自行勾選。）勾選Recompile on changes后，在.ts文件發生變化后，會立即編譯成.js文件。 - 如果不需要自動編譯，可以無需開啟自動編譯選項。
tslint工具包
安裝tslint
使用WebStorm打開對應項目，通過終端（Terminal）安裝tslint：
npm install tslint --save-dev
tslint是一個強大的typescript語法檢查工具，能幫助我們迅速找到編譯錯誤。
安裝完tslint后，package.json文件內應多了"devDependencies"字段的配置，類似以下結構：
package.json
{
"name":"Your Project Name",
"version":"1.0.0",
"dependencies":{},
"devDependencies":{
"tslint":"^5.11.0"
}
}
后續安裝新的工具后也會在package.json文件中保存對應的依賴配置。
? 延伸閱讀
? tslint官網
開啟tslint
安裝完后，需要將tslint開啟：
1. 進入**File - Settings - Languages & Frameworks - TypeScript - TSLint**；
2. 勾選**Enable**復選框；
3. 如果勾選**Enable**復選框后，字段`TSLint package`出現紅色警告，則將其改成項目路徑下的tslint package的路徑，路徑位置應該為`項目根目錄\node_modules\tslint`，如配置正確，在該輸入框后部會顯示tslint的版本號。
生成默認的tslint配置文件
使用WebStorm打開對應項目，通過終端（Terminal）生成tslint默認配置文件：
tslint --init
? 如果命令行提示找不到tslint命令的話，有以下兩種解決方案：
? 1. 命令行根目錄路徑進入
項目根目錄\node_modules\.bin，再次執行命令tslint --init；? 用這種方法，生成的tslint.json文件應該在
項目根目錄\node_modules\.bin路徑下，需要把文件移到項目根目錄? 2. 全局安裝
tslint和typescript后，再次執行命令tslint --init，全局安裝tslint和typescript的命令為：?
npm install tslint -g
npm install typescript -g
? 用第2種方法生成完畢之后，在項目的根目錄應該多了一個文件tslint.json。
如一切就緒，生成tslint.json后，其內部結構應該類似如下結構：
tslint.json
{
"defaultSeverity":"error",
"extends":[
"tslint:recommended"
],
"jsRules":{},
"rules":{},
"rulesDirectory":[]
}
? 延伸閱讀
?
--init也可以簡寫成-i，如上面的安裝語句也可以寫成：?
tslint -i
prettier工具包
安裝prettier
使用WebStorm打開對應項目，通過終端（Terminal）安裝prettier：
npm install prettier --save-dev
prettier是一個代碼格式美化工具，它可以幫助我們快速按照統一的標準格式格式化工具，在多人協作的項目中可以避免因代碼書寫習慣不一而導致代碼沖突。
? 延伸閱讀
開啟prettier文件觀察器
安裝之后prettier后，每次文件改動（發生變動并保存）后，需要手動輸入prettier指令進行文件美化。例如：
prettier --write [文件名 ...]
? 延伸閱讀
但是我們可以通過WebStorm配置文件觀察器來達到自動執行美化，配置方法如下
1. 依次打開 `File - Setting - Tools - File Watchers`；
2. 在右側窗口右上角處點擊`+`按鈕，在打開的下來菜單中選擇`prettier`，打開`New Watcher`窗口；
3. 在`New Watcher`窗口中，找到 `Files to Watch - File type`配置項，并通過其下拉菜單選擇`TypeScript`；
4. 點擊`OK`按鈕完成配置，之后，只要更改`.ts`文件并保存，將會自動將其編譯成`.js`文件。?
? 其他配置應該是默認配置好的，無需改動
prettier忽略代碼塊
某些時候，我們希望代碼塊不被美化，例如典型的matrix，我們在給matrix賦值的時候為了方便查閱，經常會按以下格式編寫：
const matrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
為了不讓prettier的規則破壞便于我們閱讀的格式，我們可以在代碼塊前面添加注釋// prettier-ignore來達到讓prettier忽略該代碼塊的作用。
// prettier-ignore
const matrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
tslint-config-prettier工具包
安裝和配置tslint-config-prettier
使用WebStorm打開對應項目，通過終端（Terminal）安裝tslint-config-prettier：
npm install tslint-config-prettier --save-dev
安裝完后，打開tslint.json文件，并修改extends字段，使其生效，配置修改如下：
tslint.json
"extends": [
"tslint:recommended",
"tslint-config-prettier"
]
因為我們最開始安裝的tslint和prettier工具有一部分功能重疊，所以會導致功能沖突，而tslint-config-prettier能夠解決這些沖突，它將所有代碼格式化的責任交給了prettier，而將所有語法檢查交給了tslint，使這兩個工具各司其職。
? 延伸閱讀
webpack工具包
安裝webpack
使用WebStorm打開對應項目，通過終端（Terminal）安裝webpack（安裝耗時比較長，約10分鐘）：
npm install webpack --save-dev
webpack工具能夠幫助我們管理文件模塊、給文件增加版本控制、還能通過各種方式提高我們的開發效率。
? 延伸閱讀
安裝webpack CLI
使用WebStorm打開對應項目，通過終端（Terminal）安裝webpack-cli：
npm install webpack-cli --save-dev
因為我們會使用到webpack的命令行接口，所以除了安裝webpack工具本身以外，我們還需要安裝webpack-cli，即它的命令行接口。
至此我們已經可以通過npm命令來打包我們的項目了：
npx webpack
此時，打包的起始文件是項目根目錄\src\index.js，而打包出來的文件則是項目根目錄\dist\main.js，之后，我們需要手動操作將main.js加入程序引用后方可使用，但是我們可以添加一個webpack配置文件來讓減少我們的手動操作，請往下看。
新建webpack配置文件
在項目的根目錄，新建一個js文件，并命名為webpack.config.js，在文件中加入以下默認基礎配置：
webpack.config.js
const path = require('path');
module.exports = {
entry: '項目的入口js文件名字（相對路徑）',
output: {
path: path.resolve(__dirname, '輸出路徑根目錄'),
filename: '打包后的js文件名字（可含路徑）'
}
};
然后我們還需要修改打包配置文件package.json，找到"scripts"字段并新增"build"屬性，如下：
package.json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
}
}
添加"build"字段之后，我們就可以通過npm命令來打包，而不是通過npx，請使用以下命令打包：
npm run build
? 延伸閱讀
ts-loader加載器
如果沒有開啟ts文件自動編譯的話，在我們使用webpack打包生成js文件時，需要額外增加ts-loader加載器，以便webpack能夠識別和編譯ts文件。
安裝ts-loader
使用WebStorm打開對應項目，通過終端（Terminal）安裝ts-loader：
npm install ts-loader --save-dev
ts-loader配置
安裝完畢后，還需要為webpack工具新增配置，在webpacck.config.js中添加module字段和值
webpacck.config.js
module.exports = {
module:{
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
module的rules下可以添加多種loader，例如css-loader，這里我們只需要添加ts-loader即可。test屬性是檢測使用該種loader的正則表達式，而use屬性則表示要使用的loader種類
完成以上配置后，我們可以再次通過npm run build來重新導出。
? 延伸閱讀
HtmlWebpackPlugin插件
安裝HtmlWebpackPlugin
使用WebStorm打開對應項目，通過終端（Terminal）安裝HtmlWebpackPlugin：
npm install html-webpack-plugin --save-dev
使用HtmlWebpackPlugin插件的目的是進一步減少我們的人工操作，例如我們有好幾個模塊需要導出，如：login.js, register.js, main.js，我們通過webpack可將他們分別導出，但是我們還需要手動將他們以<script>標簽的形式添加到index.html文件中才能正常使用。
使用HtmlWebpackPlugin插件，可以省去人工添加<script>標簽的步驟，下面我們來看看怎么通過修改webpack.config.js來使HtmlWebpackPlugin插件起效。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引用HtmlWebpackPlugin插件
module.exports = {
entry: '項目的入口js文件名字（相對路徑）',
output: {
path: path.resolve(__dirname, '輸出路徑根目錄'),
filename: '打包后的js文件名字（可含路徑）'
},
//配置HtmlWebpackPlugin插件
plugins:[
new HtmlWebpackPlugin({
title: '主入口HTML文件的<title>標簽內的文本',
filename: '主入口HTML文件的名稱，一般為 index.html'
})
]
};
完成以上配置后，我們可以再次通過npm run build來重新導出。
如果一切正常，我們就不需要再通過手動添加<script>標簽了，即使我們再新添js模塊也不需要手動添加。
但是，這里還有個問題，假如我們修改了某個模塊的名稱，或者刪除了某個模塊，那么原來生成的模塊js文件依然存在我們的輸出路徑下，需要手動刪除。
? 延伸閱讀
CleanWebpackPlugin插件
使用WebStorm打開對應項目，通過終端（Terminal）安裝CleanWebpackPlugin：
npm install clean-webpack-plugin --save-dev
CleanWebpackPlugin插件能幫助我們清理打包導出路徑下的文件，這樣每次我們重新導出項目后，將沒有多余的模塊，這就很好解決了上一小節我們遇到的問題，我們再也不需要手動刪除更名后的原模塊文件，也不需要手動刪除不再使用的模塊。下面我們來新增CleanWebpackPlugin的配置來使其生效。
CleanWebpackPlugin配置
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');//引用CleanWebpackPlugin插件
module.exports = {
entry: '項目的入口js文件名字（相對路徑）',
output: {
path: path.resolve(__dirname, '輸出路徑根目錄'),
filename: '打包后的js文件名字（可含路徑）'
},
plugins:[
new HtmlWebpackPlugin([
title: '主入口HTML文件的<title>標簽內的文本'，
filename：'主入口HTML文件的名稱，一般為 index.html'
]),
//配置CleanWebpackPlugin插件
new CleanWebpackPlugin(['需要清理的路徑', ...'其他需要清理的路徑'])
]
};
配置完成以后可以再次執行npm run build，這時，所配置的清理路徑下的文件將先被刪除。隨后才會生成我們需要的文件，如此，我們不再需要手動刪除無用的模塊了。
? 延伸閱讀
SplitChunksPlugin插件
經過了以上漫長的環境搭建操作，我們已經基本完成了項目打包自動化了，接下來我們還需要考慮的是如何優化我們的打包。雖然我們已經做到了多模塊自動化導出，但是假設我們在多模塊中同時使用了某個模塊，則該被使用的模塊將會被重復導入到各個使用它的模塊當中，也即是產生了重復的冗余代碼。
webpack4.0自帶的SplitChunksPlugin插件可以解決這個問題，不需要通過npm來安裝新的工具包或插件。下面我們來看看怎么添加SplitChunksPlugin配置。
SplitChunksPlugin配置
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: '項目的入口js文件名字（相對路徑）',
output: {
path: path.resolve(__dirname, '輸出路徑根目錄'),
filename: '打包后的js文件名字（可含路徑）'
},
plugins:[
new HtmlWebpackPlugin([
title: '主入口HTML文件的<title>標簽內的文本'，
filename：'主入口HTML文件的名稱，一般為 index.html'
]),
new CleanWebpackPlugin(['需要清理的路徑', ...'其他需要清理的路徑']),
],
//配置SplitChunksPlugin
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2，
minSize:1
}
}
}
}
};
執行npm run build后，如果有重復使用的模塊，那么在輸出目錄下應該多了一個commons.js文件。
? 延伸閱讀
chunkhash緩存配置
有過前端程序開發的程序員，應該對文件緩存都有所了解。緩存用得好可以大大減少網絡加載的負擔，但是如果不注意，有可能希望重新加載新資源的時候，卻加載的是緩存資源。webpack工具包為我們提供了緩存相關的配置，能滿足我們兩個需求：
- 在導出程序包的時候僅導出發生變化的模塊；
- 文件發生更新的時候，能保證網絡加載時能渠道最新的文件，而不是緩存文件。
基于以上兩點，我們有必要為項目添加chunkhash緩存配置，下面我們來看看如何添加：
webpack.config.js
module.exports = {
output: {
path: path.resolve(__dirname, '輸出路徑根目錄'),
filename: '打包后的js文件名字.[chunkhash].js（可含路徑）'
}
}
我們僅僅需要修改output字段的filename屬性，即可達到配置目的。在filename的值當中，將[chunkhash]插入到你想加入MD5字符串的位置，例如，filename: 'bundle.[chunkhash].js'。
執行npm run build后生成的文件名，應該類似于bundle.7f150679794890f46e2f.js，那么我們的緩存配置就完成了。
CopyWebpackPlugin插件
我們在項目開發過程中，可能會遇到某些文件不需要或不能使用webpack包裝的，但是當我們發布項目的時候，這些文件也必須添加到最終的發布文件里面。這種情況下，我們可以引入CopyWebpackPlugin。CopyWebpackPlugin能夠幫助我們把必要的文件拷貝到我們的發布路徑里，這樣就達到了發布的目的了。CopyWebpackPlugin的使用和其他插件也很相像，請看下面的例子。
CopyWebpackPlugin的安裝
使用WebStorm打開對應項目，通過終端（Terminal）安裝CopyWebpackPlugin：
npm install copy-webpack-plugin --save-dev
CopyWebpackPlugin的使用
CopyWebpackPlugin的使用方法也和其他webpack插件非常類似，在webpack.config.js加入相應的配置即可。
webpack.config.js
const CopyWebpackPlugin =require("copy-webpack-plugin");
module.exports = {
plugins:[
new CopyWebpackPlugin([
{
from: '需要拷貝的文件名稱（可含路徑）',
to:'新的文件名稱（可含路徑）'
}
])
]
}
通過執行npm run build后，相應的文件將被拷貝到對應的位置和名稱了。
? 延伸閱讀
三、運行調試
代碼查閱配置
mode字段
我們在開發過程中，難免會遇到程序報錯，一旦遇到報錯，我們希望能夠直達報錯所在代碼查看報錯原因。
當我們將webpack.config.js的mode字段配置為"production"的時候，webpack工具包會將導出的文件進行壓縮，所以是打包之后的文件是難以閱讀的。
webpack.config.js
module.exports = {
mode:"production" //可選值為"none", "development"和"production"
}
那么我們可以將mode字段的值設為"development"，這樣當我們在瀏覽器查看報錯時，代碼的可閱讀性得到了大大提高。
webpack.config.js
module.exports = {
mode:"development" //可選值為"none", "development"和"production"
}
devtool字段
但畢竟是經過打包的代碼，如果我們希望更進一步還原原始代碼的話，可以增加devtool字段，如下：
webpack.config.js
module.exports = {
mode:"development",
devtool:"inline-source-map"
}
通過執行npm run build后，我們新生成的程序包，如果在運行時報錯的話，那么我們可以查看完全還原的代碼，迅速找到錯誤原因。
自動編譯
watch命令
這么久以來，每次我們隊項目進行改動，或對配置進行改動之后，必須要通過手動執行npm run build才能查看編譯后的文件，那么有沒有像prettier那樣的觀察器可以配置呢？
答案是有的，但是配置方式并不像prettier觀察器，自動編譯無法通過webStorm來配置。相應的，我們來看看該如何讓我們的項目自動編譯吧。
首先來修改package.json文件
package.json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "webpack --watch"
}
}
我們在打包配置文件package.json中的scripts字段添加了watch屬性，實際運行是webpack的watch命令。現在我們在webStorm的終端（Terminal）中執行npm run watch，執行之后終端并沒有結束，是因為它正在觀察是否有文件發生了修改，一旦發現則會自動編譯該文件。
現在只要我們執行過一遍npm run watch之后，就不在需要每次改動文件后去執行npm run build來重新編譯文件了。
? 注意
? npm run watch命令執行之后，終端是不會自動結束的。如果需要關閉watch進程，只要關閉終端窗口即可。如果還需要執行其他命令，可以開啟新的終端窗口。
webpack-dev-server工具包
前面我們已經使用webpack的watch命令來自動編譯代碼了，那么，如果編譯完代碼以后，網頁還可以自動重新加載這些變動，我們的開發環境就更加智能了。下面我們來看看怎么可以做到熱加載。
webpack-dev-server安裝
使用WebStorm打開對應項目，通過終端（Terminal）安裝webpack-dev-server：
npm install webpack-dev-server --save-dev
安裝完后，讓我們來看看如何添加相應的配置
webpack.config.js
module.exports = {
devServer:{
contentBase:"網站服務器的根目錄，也即是我們的打包輸出路徑"
}
}
在webpack.config.js配置文件中我們添加了devServer的字段，并為其添加contentBase的屬性。然后我們需要到package.json配置文件中添加啟動網站服務器的腳本配置。
package.json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"watch": "webpack --watch",
"server": "webpack-dev-server --open"
}
}
最后，讓我們執行npm run server命令來啟動網站服務器吧。啟動服務器后，會使用默認瀏覽器打開地址http://localhost:8080。現在我們修改文件后，文件會自動編譯打包，而且網頁也會自動更新了。
? 注意
? 與上面
npm run watch提到的問題一樣，執行完npm run server后終端是不會自動結束的。如果需要關閉server進程，只要關閉終端窗口即可。如果還需要執行其他命令，可以開啟新的終端窗口。? 延伸閱讀
@Freeman
