Webpack 4
webpack 4有很多新的特性。
2. 产品模式和开发模式 (production and development mode)
1. 不再必须有配置文件
好消息：webpack 4 doesn’t need a configuration file. Webpack 4不再必须需要一个配置文件了！
如果没有配置文件，Webpack 4会默认.src/index.js为入口文件。
2. 产品模式和开发模式 (production and development mode)
webpack4 引入了产品模式和开发模式的概念。
只需要在打包命令中加入参数，例如：
$ webpack --mode development
$ webpack --mode production
webpack就会以不同模式打包文件。
产品模式提供了开箱即用的一些优化配置，包括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。
在文件中输入以下内容：
{"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 开发服务器
在设置好webpack dev server之后。你的应用将在浏览器中自动启动。
在每次修改文件后，浏览器窗口也会自动刷新。
安装依赖项
npm i webpack-dev-server --save-dev
package.json中的配置代码
"scripts": {"start":"webpack-dev-server --mode development --open","build":"webpack --mode production"}
网友评论