Webpack 4
?webpack 4有很多新的特性。
2. 產(chǎn)品模式和開發(fā)模式 (production and development mode)
1. 不再必須有配置文件
好消息：webpack 4 doesn’t need a configuration file. Webpack 4不再必須需要一個配置文件了松忍！
如果沒有配置文件，Webpack 4會默認.src/index.js為入口文件欲芹。
2. 產(chǎn)品模式和開發(fā)模式 (production and development mode)
webpack4 引入了產(chǎn)品模式和開發(fā)模式的概念。
只需要在打包命令中加入?yún)?shù)，例如：
$ webpack --mode development
$ webpack --mode production
webpack就會以不同模式打包文件。
產(chǎn)品模式提供了開箱即用的一些優(yōu)化配置呛伴，包括minification, scope hoisting, tree-shaking以及更多。
3. 覆寫默認的入口路徑/導出路徑
直接上代碼：
"scripts": {"dev":"webpack --mode development ./foo/src/js/index.js --output ./foo/main.js","build":"webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"}
4. 使用Webpack 4 編譯ES6代碼
4.1. 使用配置文件來加載loader
Webpack的loader之一babel-loader可以完成這個工作谒所。
使用babel-loader之前需要安裝一下依賴：
babel-core
babel-loader
babel-preset-env
npmibabel-core babel-loader babel-preset-env --save-dev
接下來通過新建一個新文件.babelrc來配置Babel热康。
在文件中輸入以下內(nèi)容：
{"presets": ["env"]}
4.2. 不使用配置文件來加載loader
"scripts": {"dev":"webpack --mode development --module-bind js=babel-loader","build":"webpack --mode production --module-bind js=babel-loader"}
--module-bind允許你在命令行中聲明要加載的loader
5. HTML Webpack插件
Webpack使用兩個額外組件來處理HTML：html-webpack-plugin 和 html-loader。
加載依賴項：
npm i html-webpack-plugin html-loader --save-dev
配置文件：
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"})? ]};
不用手動將JavaScript文件插入到HTML文件中劣领。打包后的文件將會被自動插入姐军。
6. 提取CSS到文件中
需要用到以下組件：
mini-css-extract-plugin
css-loader
安裝依賴：
npm i mini-css-extract-plugin css-loader --save-dev
配置文件：
const HtmlWebPackPlugin = require("html-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {? module:{? ? rules:[? ? ? {? ? ? ? test:/.js$/,? ? ? ? exclude:/node_modules/,? ? ? ? use:{? ? ? ? ? loader:"babel-loader"}? ? ? },? ? ? {? ? ? ? test:/.html$/,? ? ? ? use:[? ? ? ? ? {? ? ? ? ? ? loader:"html-loader",? ? ? ? ? ? options:{ minimize: true }? ? ? ? ? }? ? ? ? ]? ? ? },? ? ? {? ? ? ? test:/.css$/,? ? ? ? use:[MiniCssExtractPlugin.loader,"css-loader"]? ? ? }? ? ]? },? plugins:[? ? new HtmlWebPackPlugin({? ? ? template:"./src/index.html",? ? ? filename:"./index.html"}),? ? new MiniCssExtractPlugin({? ? ? filename:"[name].css",? ? ? chunkFilename:"[id].css"})? ]};
7. Webpack 開發(fā)服務器
在設置好webpack dev server之后。你的應用將在瀏覽器中自動啟動尖淘。
在每次修改文件后奕锌，瀏覽器窗口也會自動刷新。
安裝依賴項
npm i webpack-dev-server --save-dev
package.json中的配置代碼
"scripts": {"start":"webpack-dev-server --mode development --open","build":"webpack --mode production"}
