徹底方案：超詳細的webpack4配置（webpack3與webpack4的差別）

webpack4的發佈已經有一段時間了，據說webpack4的發佈是注意到了他的亮點：實現零配置。webpack4制定了入口和出口的位置，可是實現頁面應用和須要具體的功能的是時候仍是避免不了進行配置一些選項。並且webpack的難點和精髓也在配置裏面。webpack3對比webpack4傳送門http://www.javashuo.com/article/p-tmtuzfjh-kh.html

想想公司後臺好像在用spring cloud和spring Boot一樣是幫你配置了大部分配置選項從而減小手動配置的做用。通讀了一下webpack4的技術文檔，來擼一擼webpack4有哪些變化。

　　來看一下package.json

{
　　"name": "webpack_demo",
　　"version": "1.0.0",
　　"description": "",
　　"main": "index.js",
　　"scripts": {
　　　　"dev": "webpack --mode development",
　　　　"build": "webpack --mode production",
　　　　"start": "webpack-dev-server --inline --hot"
　　},
　　"keywords": [
　　　　""
　　],
　　"author": "kim",
　　"license": "ISC",
　　"devDependencies": {
　　　　"babel-core": "^6.26.3",
　　　　"babel-eslint": "^8.2.6",
　　　　"babel-preset-es2015": "^6.24.1",
　　　　"bable-loader": "0.0.1-security",
　　　　"css-loader": "^1.0.0",
　　　　"eslint": "^5.2.0",
　　　　"eslint-config-airbnb": "^17.0.0",
　　　　"eslint-config-standard": "^11.0.0",
　　　　"eslint-loader": "^2.1.0",
　　　　"eslint-plugin-html": "^4.0.5",
　　　　"html-loader": "^0.5.5",
　　　　"node-sass": "^4.9.2",
　　　　"sass-loader": "^7.0.3",
　　　　"style-loader": "^0.21.0",
　　　　"webpack": "^4.16.2",
　　　　"webpack-cli": "^3.1.0",
　　　　"webpack-dev-server": "^3.1.5"
　　},
　　"dependencies": {
　　　　"babel-loader": "^7.1.5",
　　　　"jquery": "^3.3.1",
　　　　"mustache": "^2.3.0"
　　}
}

這是最終形態，幾個重要的點有一下選項：main ， scripts  ， devDependencies ， dependencies。

在package.json裏面能夠直觀的看到項目所引用的不一樣情況的依賴（devDependencies，dependencies）和啓動項目的命令（scripts）。

如下是在本地建了一個名叫webpack的文件夾，咱們的demo放在裏面

cd webpack

npm init                                                 初始化

npm install webpack --save-dev　　   安裝webpack

webpack -w　　　　　　　　　　　   webpack -watch的縮寫，監聽的時候順便打包。中間過程可能會報錯，根據提示安裝webpack-cli

(webpack-cli)   

 

如下是執行webpack -w結果：

 

webpack4在loader,optimize上進行了不少改動。

咱們手動建立webpack.config.js文件，module.exports模塊配置了入口，出口，插件，loader工具，優化等等：

npm install jquery --save

 

npm install bable-loader --save-dev

npm install babel-core babel-preset-es2015 --save-dev 

 

 

webpack配置須要注意的幾點：

 

 

 

module.loaders改成module.rules

module.loaders.loader改爲module.loaders.use

loader的」-loader」均不可省略

 

 

 

 

某些配置選項配置時候須要絕對路徑

 

 

 

合併相同的插件

plugins : [new webpack.optimize.CommonsChunkPlugin({

name : 'main',

children : true,

minChunks : 2,

}),],

 

此段代碼已經在webpack4的高版本里面被移除

換成了以下的配置選項：

optimization: {

        splitChunks: {

            cacheGroups: {

                commons: {

                    name: "commons",

                    chunks: "initial",

                    minChunks: 2

                }

            }

        }

    },

 

 

 

運行webpack-dev-server --inline --hot時報錯「command not found」

這時候須要全局安裝webpack-dev-server: npm install webpack-dev-server -g

 

 

webpack的scripts選項：

"scripts": {

    "dev": "webpack --mode development",

    "build": "webpack --mode production"

  },

 

用npm run dev 和npm run build來實現。

 

代碼仍是要上手擼的，儘管如今的構建工具幫你作了大部分的工做，可是除了可以熟練應用以外，還應該可以深諳其中的原理，這樣的話，不論它如何變化都不可以對你的代碼形成斷層性的阻斷做用。webpack內部仍是有不少的高級配置的由於項目並無用到webpack，加之不適合，因此具體的實用的例子還得在之後本身作過demo或者參與項目構建以後纔可以道清其使用的使用技巧。