這篇文章帶給大家的內容是關於webpack4新增了哪些東西？需要注意些什麼？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
在開發人員還在體會webpack3.x的餘韻時，webpack4.x已經悄悄地來。
而對使用者來說，最期待的問題無外乎如下：
#新版本與舊版本相比有哪些改變？
webpack3.x到webapck4.x的遷移？
使用webpack4.x我們該注意什麼？
webpack的新功能
webpack 作為建置工具的強大之處在於：
可以在webpack.config.js 中配置許多獨特的功能；
它的配置靈活多變；
console.log('hello webpack.')"scripts": {
"build": "webpack"
}WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
打包模式的改變
我們再回頭查看上面這個提示信息，它的意思就是說：'如果沒有設置打包模式這個配置項，那麼默認的打包模式為生產模式（production），而對於開發模式（development），需要配置mode 配置項'，說到這裡，我想各位看官應該明白了webpack4.x增加了很多默認配置項，針對不了解webpack的人員或小應用開發的場景，這樣做無異省時省力。 但實際應用中，我們往往還是區分開發模式和生產模式，但這在webpack4.x中也不是什麼難事兒，只要修改package.json 中的scripts 如下："scripts": {
"dev": "webpack --mode development", // 用于开发模式
"build": "webpack --mode production" // 用于生产模式
}重載預設的設定項入口/出口
沒有了設定檔 webpack.config.js ，在減少了我們的設定工作量同時，也給初窺門徑的我們帶來了一些疑問。例如：如何自訂入口/出口？ 在沒有webpack.config.js 的情況下，我們可以在命令列中新增入口/出口設定項，程式碼如下："scripts": {
"dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用于开发模式
"build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用于生产模式
}webpack的遷移和注意事項
看到webpack4.x的這些變化，很多人不僅會問webpack3.x到webpack4.x的遷移是不是很麻煩，其實不麻煩，webpack4.x向後相容webpack.3x。 前面為了不引入webpack.config.js ，我們使用了npm的scripts ，其時像入口/出口的重載，我們也可以在webpack.config.js 設定檔中完成，設定跟原來的相似，但webpack4.x有以下問題要注意：升级到webpack4.x，你会发现在使用 extract-text-webpack-plugin 分离 *.css 出文件时经常出错，这是 extract-text-webpack-plugin 本身的问题，官方推荐使用 mini-css-extract-plugin 来避免问题的出现，但使用 mini-css-extract-plugin 有一个限制就是webapck须是4.2.0版本以上（较低的版本不支持）。
使用 使用babel-loader 转化ES6->ES5时将不需要 .babelrc 配置文件，你只需要在 package.json 的 scripts 中添加 --module-bind js=babel-loader 即可完成对 babel-loader 的配置。
其他的loader和plugin没有什么大的变化。其实讲到这里基本完了，下面是用webpack4.x构建的一个demo。
webpack4.x的demo
紧接上面的配置：
首先，添加 html-wepback-plugin 和 html-loader 依赖：
npm install html-webpack-plugin html-loader --save-dev
html-webpack-plugin生成html文件（html文件用来加载打包生成 bundle.js 文件），当然你也可以使用webpack支持的各种模板loader，这里使用 html-loader 支持的 *.html 类型模板来生成。
其次，添加 mini-css-extract-plugin 和 css-loader 依赖：
npm install mini-css-extract-plugin css-loader --save-dev
loader和plugin配置与webpack3.x类同，也可参考下面提供代码中的 webpack.config.js 文件。
然后，添加 babel-loader 、@babel/babel-core 和 @babel/babel-preset 依赖：
npm install @babel/core babel-loader @babel/preset-env --save-dev
loader和plugin配置与webpack3.x类同，也可参考下面提供源码中的 webpack.config.js 文件。
修改 package.json 中 scripts 如下：
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader ./src/entry.js --output ./dist/bundle.js",
"build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},最后，添加 webpack-dev-server 依赖，实现项目文件修改，浏览器及时刷新
npm install webpack-dev-server
在 package.json 中 scripts 的 dev 替换 webpack 为 webpack-dev-server 即可，代码如下：
"scripts": {
"dev": "webpack-dev-server --mode development --module-bind js=babel-loader ./src/entry.js --output ./dist/bundle.js",
"build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},这样一个简单的demo就完成了。
其他的loader和plugin配置和webpack3.x类同。
以上是webpack4新增了哪些東西？需要注意些什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
