2019-12-17 第一次更新----------------------------------------------------------
1.大的環境配置，git node webpack 等等的一些插件全局安裝，一般國內使用npm下載（服務器架設在國外）會有一些網絡問題，可以使用淘寶鏡像代理，但是不建議這么做，因為淘寶鏡像下載依賴經常出現各種各樣的奇葩問題，總之可以用npm的話就不用cnpm（淘寶鏡像）。這些東西下載的話可以自行百度（一大堆），這里就不詳述了。
2.進入項目目錄文件夾，一般來說這時候是一個空的文件夾。
運行 npm init -y 或者 npm init 前者更省事兒一點。
3.運行 npm install -D webpack 在項目目錄下安裝webpack，同時高版本的webpack還需要 安裝webpack-cli，安裝方法與前面類似。
4.在項目根目錄文件夾下創建一個webpack.config.js文件（這里給出一份基礎的配置內容）：
module.exports = { mode: 'development', //入口 entry: __dirname + '/src/index.ts', //出口 output: { path: __dirname + '/dist', filename: 'bundle.js', }, module: { rules: [ { test: /\.tsx?$/, use: { loader: 'ts-loader' } }, ] }, resolve: { extensions: [".ts", ".js"], alias: { "@": __dirname + "/src", // "@component": __dirname + "src/component", // "@pages": __dirname + "src/pages", // "@utils": __dirname + "src/utils", }, } }
5.在上述配置文件中可以看到我們使用了TS（typescript）依賴，首先需要下載依賴：
npm install -D typescript ts-loader 。其次，再在webpack.config.js中做出配置（這里我直接先展示了配置好的文件）。
6.接下來需要在項目根目錄文件夾中創建tsconfig.json文件，這里同樣提供一份基礎的ts打包配置文件：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "module": "commonjs", "target": "es5", "sourceMap": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "allowJs": true, }, "include": [ "src/ts/*", "src/*" ], "exclude": [ "node_modules", "dist" ] }
7.至此，包含一個入口一個出口，可以使用ts編程的基礎框架就做好了，如果需要打包html、css文件，需要下載和配置額外的依賴。附一張目前為止的項目文件目錄結構：
附：有關webpack打包的快捷命令設置（在package.json文件中）：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --mode development", "build": "webpack --mode production" }
配置完成后，可以使用npm run dev 以及 npm run build 做開發環境/生產環境的打包設置。
（手懶 + 技術菜 + 隨便寫寫，隨緣更新了。）
2020-03-31 第二次更新----------------------------------------------------------
8.webpack熱更新：
npm install babel-preset-es2015 --save-dev
安裝babel並在項目根目錄創建.babelrc文件，初始配置：{"presets": ["es2015"]}
安裝webpack-dev-server：npm install webpack-dev-server --save-dev
在package.json中修改script部分的腳本如下：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --mode development && webpack-dev-server --progress --colors", "build": "webpack --mode production" }
如上代碼，在運行dev時加了webpack-dev-server --progress --colors
的熱更新相關命令。此時再改變src中的工程代碼，npm就會執行自動打包。（綁定一個小型的express服務器到localhost:8090，來為你的靜態資源及bunble（自動編譯）服務。）但是到目前為止，index.html還是個本地文件，怎么生成一個服務器上的Index.html文件呢？
1）安裝html-webpack-plugin
npm install html-webpack-plugin --save-dev
2)配置html-webpack-plugin
修改webpack.config.js為如下:
const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: 'development', //入口 entry: __dirname + '/src/index.ts', //出口 output: { path: __dirname + '/dist', filename: 'bundle.js', }, module: { rules: [ { test: /\.tsx?$/, use: { loader: 'ts-loader' } }, ] }, resolve: { extensions: [".ts", ".js"], alias: { "@": __dirname + "/src", // "@component": __dirname + "src/component", "@pages": __dirname + "/src/pages", // "@utils": __dirname + "src/utils", }, }, devServer: { inline: true, port: 8080, }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new webpack.HotModuleReplacementPlugin() ] }
主要是增加了plugins配置以及該配置相關的依賴引入。
9.引入react相關依賴
（現如今做前端，最基礎的就是三大框架得會一個了吧，不然面試的時候可咋說~那么在webpack項目中如何使用react框架進行項目編寫呢？）
1）第一步當然是下載相關的依賴包了：
npm install --save react react-dom
2）接下來就是修改各種配置了：
從tsconfig.json配置開始，首先需要在tsx文件里頭支持jsx，然后需要配置編譯過程中需要引入的庫文件的列表（老實說，不太明白這個配置的意義，但是不配它就報錯呀~），同時在原來的基礎上優化了編譯的包含目錄（只是寫法改變，包含不變）。上代碼（這次我對一些改變的配置做了注釋，寫代碼打注釋是個好習慣）：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@pages/*": ["src/pages/*"] }, "module": "commonjs", "target": "es5", "jsx": "react", //在tsx文件里支持jsx "sourceMap": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "allowJs": true, "lib": ["es2015", "dom", "es2015.promise"], //編譯過程中需要引入的庫文件的列表 }, "include": [ "src/**/*" //編譯包含在 src及其子目錄下的所有匹配的文件 ], "exclude": [ "node_modules", "dist" ] }
再接下來是webpack.config.js文件配置的修改：首先修改入口為index.tsx，同樣的文件名稱也要從index.ts變成index.tsx，這么做是因為react就是jsx語法嘛~；之后，resolve里頭的extensions配置數組也需要添加.tsx文件類型。這樣基本就ok了。上代碼（老實說，每次改一丟丟都把完整的配置貼出來，這在編程里叫什么，冗余~但是便於閱讀理解，沒有想到更好的辦法之前就這樣了）：
const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); // const Merge = require("webpack-merge"); module.exports = { mode: 'development', //入口 entry: __dirname + '/src/index.tsx', //出口 output: { path: __dirname + '/dist', filename: 'bundle.js', }, module: { rules: [ { test: /\.tsx?$/, use: { loader: 'ts-loader' } }, ] }, resolve: { extensions: [".ts", ".tsx", ".js"], //添加支持的文件類型 alias: { "@": __dirname + "/src", // "@component": __dirname + "src/component", "@pages": __dirname + "/src/pages", // "@utils": __dirname + "src/utils", }, }, devServer: { inline: true, port: 8080, }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new webpack.HotModuleReplacementPlugin() ] }
好的，這樣我們就可以在項目中愉快的使用ts+react來編寫了。
（結尾預告一下之后的方向，排名不分先后：多頁面webpack配置 + 開發/生產環境webpack配置 + css相關依賴引入配置）。
10.引入less相關依賴
npm install --save-dev css-loader less-loader less style-loader
在webpack.config.js中增加如下模塊配置：
module: { rules: [ ... { test:/\.less$/, use: ['style-loader','css-loader','less-loader'] }, { test:/\.css$/, use: ['style-loader','css-loader'] }, ] }
———————————————— 完結（預告一下，下篇隨筆有個關於此篇隨筆的后續）——————————————