学习React，你必须知道的Webpack配置！_webpack+react <%= htmlwebpackplugin.options.title -CSDN博客

学习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

在初始化的 package.json 中添加指令：

"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需要依赖的插件的地方

做好以上的配置，就可以创建 ./src/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>
</section>
</body>
</html>

创建 ./src/index.js文件：

console.log(`I've been required by Webpack`);

然后控制台执行指令：

npm run build

执行成功后，会发现项目根目录下多了一个 build 文件夹，以及压缩后的index.html , index,js文件

浏览器运行这个index.html，可以看到页面及控制台：

2.优化图片

添加依赖：

npm i img-loader url-loader file-loader --save-dev

img-loader 是优化图片的loader。

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>

webpack.config.js 文件中更新下，增加图片的loader配置：

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"
})
]
};

然后运行指令 npm run build，结束后刷新index.html页面，观察控制台，可以看到小图片2.png转为Base64 URL格式了。

3.将Sass编译为CSS并压缩

这个过程，除了css loader，还需要ExtractTextPlugin 插件

npm i css-loader sass-loader postcss-loader node-sass extract-text-webpack-plugin --save-dev

webpack.config.js 更新，添加css loader 配置：

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