学习React,你必须知道的Webpack配置!
学习react,就要配套去学Webpack。初始并不明白Webpack是什么,是干什么的。后来对比之前Angular的项目,才明白,Webpack干的活跟gulp是一样的。从网上搜到了一个国外的大神写的blog,跟着一步一步配置,受益颇多。我按照自己的理解,做了简单的整理。
- 将多个HTML文件,整合为一个HTML文件,并压缩
- 优化图片
- 将Sass编译为CSS并压缩
- 结合Babel编译JS文件,并压缩
- 监听文件变化并在保存时重新编译,刷新页面(通过Webpack Dev Server)
首先,我们要新建一个文件夹,进行项目初始化,做一些简单的配置。
mkdir webpack-demo然后,在项目文件夹中,创建一些必要的文件夹: js,img,_scss。
通过指令初始化 package.json ,安装webpack
- npm init -y
-
npm i webpack --save-dev
"scripts": { "build": "webpack", "watch": "webpack --watch" }准备工作结束!
1.将多个HTML文件,整合为一个HTML文件,并压缩
与gulp不同,webpack是专门针对JavaScript的,所以它根本不知道怎么处理其他格式的文件。
这时,就需要loaders了。可以把loaders理解为是“转换器”。
下载HTML的loaders:
npm i html-webpack-plugin html-loader --save-dev安装的同时,就在根目录下创建一个配置文件 webpack.config.js 。这个文件相当重要,因为当运行webpack项目的时候,
会自动去找一个配置文件,就是这个文件。
初始化会有一些基础的配置:
const HtmlWebPackPlugin = require("html-webpack-plugin"); const path = require("path"); module.exports = { entry: ["./src/js/index.js"],// 重要 output: {//重要 filename: "js/index.js", path: path.join(__dirname, "./build/") }, module: { rules: [// 规则这里,配置不同文件类型的loader { test: /\.html$/, use: [{ loader: "html-loader", options: { minimize: true } }] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }) ] };重点:
-
entry: 指定项目入口js文件
- output: webpack打包后的js文件路径及名称
- module and rules: 配置不同文件格式loaders的地方
- plugins: 配置webpack需要依赖的插件的地方
- <!DOCTYPE html>
- <html lang="it">
-
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Webpack</title>
- </head>
-
- <body>
- <section class="main">
- <h1>Hello Webpack!!</h1>
- </section>
- </body>
-
- </html>
创建 ./src/index.js文件:
- console.log(`I've been required by Webpack`);
- npm run build
浏览器运行这个index.html,可以看到页面及控制台:
2.优化图片
添加依赖:
- npm i img-loader url-loader file-loader --save-dev
url-loader 是当图片在指定大小下会转换为一个Base64 URL。
加载 Base64 URL的图片的好处在于:浏览器不用加载外部的图片。但是也有限制:太大的图片不能通过Base64 URL 的形式加载。
接下来,自己找两个图片,一个大点的(1.png)一个小点的(2.png),放到img文件夹里,引入index.html中:
- <!DOCTYPE html>
- <html lang="it">
-
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Webpack</title>
- </head>
-
- <body>
- <section class="main">
- <h1>Hello Webpack!!</h1>
- <img src="img/1.png">
- <img src="img/2.png">
- </section>
- </body>
-
- </html>
- const HtmlWebPackPlugin = require("html-webpack-plugin");
- const path = require("path");
-
- module.exports = {
- entry: ["./src/js/index.js"],
- output: {
- filename: "js/index.js",
- path: path.join(__dirname, "./build/")
- },
- module: {
- rules: [
- {
- test: /\.html$/,
- use: [{ loader: "html-loader", options: { minimize: true } }]
- },
- {// 新增的,对图片编译的配置
- test: /\.(png|jpe?g)/i,
- use: [
- {
- loader: "url-loader",
- options: {
- name: "./img/[name].[ext]",
- limit: 10000
- }
- },
- {
- loader: "img-loader"
- }
- ]
- }
- ]
- },
- plugins: [
- new HtmlWebPackPlugin({
- template: "./src/index.html",
- filename: "./index.html"
- })
- ]
- };
3.将Sass编译为CSS并压缩
这个过程,除了css loader,还需要ExtractTextPlugin 插件
- npm i css-loader sass-loader postcss-loader node-sass extract-text-webpack-plugin --save-dev
const HtmlWebPackPlugin = require("html-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); //新加 const path = require("path"); module.exports = { entry: ["./src/js/index.js", "./src/_scss/main.scss"], output: { filename: "js/index.js", path: path.join(__dirname, "./build/") }, module: { rules: [ { test: /\.html$/, use: [{ loader: "html-loader", options: { minimize: true } }] }, { test: /\.(png|jpe?g)/i, use: [ { loader: "url-loader", options: { name: "./img/[name].[ext]", limit: 10000 } }, { loader: "img-loader" } ] }, {//新加 test: /\.scss$/, use: ExtractTextPlugin.extract({ use: [ { loader: "css-loader", options: { minimize: true } }, { loader: "postcss-loader" }, { loader: "sass-loader" } ] }) } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }), new ExtractTextPlugin({//新加,知道编译后的文件路径及名称 filename: "css/main.css" }) ] };创建一个sass文件:./src/_scss/main.scss
- $color-orange: #f98a09;
-
- .main {
- background: $color-orange;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- }
- module.exports = {
- plugins: [require("autoprefixer")]
- };
- "browserslist": ["last 2 versions"]
4.结合Babel编译JS文件,并压缩
现在已经是ES6的时代了,但是并不是所有的浏览器都认识ES6的语法,所以出现了Babel,转译ES6为ES5,让浏览器都能运行。同样的,也需要loader:
- npm i babel-core babel-loader babel-preset-env --save-dev
- {//添加到rules 数组中
- test: /\.js$/,
- use: {
- loader: "babel-loader",
- options: {
- presets: ["env"]
- }
- }
- }
- console.log(`I've been required by Webpack`);
- import './es6code'; // 新增
- (() => {
- const IAmES6 = `I've been transpiled by Babel`;
- console.log(IAmES6);
- })();
5.监听文件变化并在保存时重新编译,刷新页面
虽然在package.json 文件中我们已经添加了监听指令
- "scripts": {
- "build": "webpack",
- "watch": "webpack --watch"
- }
Webpack Dev Server 到底做了什么呢?
它只需要行配置就可以启动并运行一个开发服务器。一旦配置好,你就会运行一个npm 脚本,Webpack将会在浏览器中启动你的项目。
安装Webpack Dev Server
- npm i webpack-dev-server --save-dev
然后更新 webpakc.config.js文件:在output 声明下添加下面的配置
- devServer: {
- contentBase: "./build"
- }
- "scripts": {
- "start": "webpack-dev-server --open",
- "build": "webpack",
- "watch": "webpack --watch"
- }
以上是针对国外大神的blog翻译整理的,原文链接:
How to switch from Gulp to Webpack: a tutorial to get you started
文末还提供了一些链接,可以更深入的学习webpack。