學習整理：用webpack4.x構建基本項目

webpack4 在2018年就已經發布了，相比webpack3，webpack4須要的配置減小了不少，對入口和出口配置都有默認設置能夠不用手動設置，但仍是要在webpack.config.js中配置一些會用到的插件。css

這段時間學習webpack4，特整理筆記以下，記錄用webpack4構建基本項目的過程，若有誤歡迎指正！html

參考：https://www.html.cn/archives/9436node

先上一下配置文件，裏面有相關版本號，特別要注意的是babel-core和babel-loader的版本，會有不兼容的狀況：webpack

1.首先新建項目目錄git

新建src文件夾和dist文件夾
在src文件夾下新建html、css、js、image文件夾，新建index.html和index.js做爲入口文件（index.js是webpack4中的默認入口文件，編譯後會在dist文件夾下生成main.js文件）
執行命令 npm init 初始化項目，生成package.json文件

完成上述後項目目錄以下：github

2.接下來安裝配置webpack4web

執行命令1： cnpm i webpack@4.39.1 --save-dev
執行命令2：cnpm i webpack-cli@3.3.6 --save-dev

Tip：能夠在@後面指定版本號npm

而後在package.json文件中添加一個腳本命令

1 "scripts": { 2     "test": "echo \"Error: no test specified\" && exit 1", 3     "build": "webpack --mode production", 4 
5   },

保存並運行命令 npm run build json

（注意webpack4中默認以index.js爲入口文件進行編譯打包，若是剛纔沒有新建index.js則會報錯。固然也能夠指定入口文件）瀏覽器

運行命令成功後會在dist目錄下生成一個main.js文件（這個main.js會在index.html中默認引入，實際存在內存中因此看不到）

剛纔運行的 npm run build命令是在默認模式下進行打包的，webpack4新增了一個特性就是 production（生產）和 development（開發）模式。二者的區別是，前者打包後的文件是壓縮的，然後者這是沒有壓縮的

經過在package.json中配置不一樣命令來切換打包模式：

"scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }

而後能夠經過運行不一樣命令來切換打包模式

npm run build
npm run dev

3.下一步安裝webpack-dev-server來熱更新webpack

運行命令cnpm i webpack-dev-server --save-dev
成功以後在package.json中增長以下代碼：

"scripts": { "start": "webpack-dev-server --mode development --open", }

也能夠在這條命令中設置默認開啓的瀏覽器和是否熱更新，默認開啓端口等選項：

"start": "webpack-dev-server --mode development --open firefox --port:8020 --hot --host 127.0.0.1"

完成後保存，運行以後會自動打開瀏覽器進入頁面

4.接下來安裝配置Babel來轉譯ECMA5以上的JavaScript代碼

以上步驟都不須要像webpack3同樣在webpack.config.js中動手動腳，但配置babel仍是要新建一個webpack.config.js文件

執行命令 cnpm i babel-core babel-loader babel-preset-env --save-dev （若是有提示版本警告建議參考文章頭部提供的版本號）
在根目錄新建.babelrc，輸入以下內容
```
{ "presets": [ "env" ] }
```
在根目錄中新建webpack.config.js文件，輸入以下內容（若是要自定義入口出口，則要本身再配置一下）
```
module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } };
```
接下來能夠在index.js中手寫一些ES6語法的代碼來測試一下

5.安裝插件：html-webpack-plugin 和 html-loader來處理html

經過安裝這兩個插件來處理HTML

執行命令

cnpm i html-webpack-plugin html-loader --save-dev

而後更新webpack.config.js配置

const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.html$/, use: [ { loader: "html-loader", options: { minimize: true } } ] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "index.html" }) ] };

若是前面建立了index.html，則運行
```
npm run build
```
不然新建index.html再運行命令，成功後會發如今dist目錄中多了一個index.html文件

作到這裏項目的架構已經基本完成了，若是還要還要打包CSS文件可使用用 mini-css-extract-plugin 等插件，具體請參考 https://www.html.cn/archives/9436

文章可能有一些寫的不到位的地方，敬請諒解，歡迎指正！