webpack4的發布已經有一段時間了，聽說webpack4的發布是注意到了他的亮點：實現零配置。webpack4制定了入口和出口的位置，但是實現頁面應用和需要具體的功能的是時候還是避免不了進行配置一些選項。而且webpack的難點和精髓也在配置里面。webpack3對比webpack4傳送門https://www.cnblogs.com/wyliunan/p/10238717.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或者參與項目構建之后才能夠道清其使用的使用技巧。