一、webpack简介

学习了好几遍，但是每次还是忘记了，边学习边做笔记，加深自己印象。

1. webpack简介

说明：webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

2. webpack 五个核心概念

2.1 Entry

入口(Entry) 指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图

2.2 Output

输出（Output）指示Webapck打包后的资源bundles 输出到哪里去，以及如何命名。

2.3 Loader

Loader 让webpack 能够处理那些非Javascript文件（webpack自身只理解Javascript）

3.3 Plugins

插件（Plugins）可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义新环境中的变量等。

3.4 Mode

模式（Mode）指示Webpack使用相应模式的配置。通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

3.webpack初体验

3.1 初始化项目

在命令窗口中输入

npm init

初始化项目，根据要求填写相关信息，我这里没有填写任何信息，一路疯狂回车，结果如下图

3.2 安装依赖

执行命令，全局安装依赖

npm i webpack  webpack-cli -g

执行命令，本地安装

npm i webpack  webpack-cli -D

新建目录结构，如下图

src 存放资源文件; index.js webpack 入口起点文件; build 作为文件打包后的输出目录;

在index.js 文件中输入

function add(x, y) {
  return x + y;
}
console.log(add(1, 2));

在命令行中分别执行以下命令，查看打包后的build 输出文件的差异

 开发环境 ：webpack  ./src/index.js  -o  ./build  --mode=development 
 生产环境 ：webpack  ./src/index.js  -o  ./build  --mode=production

结论

webpack能处理js/json 资源，不能处理css/img 等资源
生产环境和开发环境将ES6模块编译成浏览器能识别的模块化
生产环境比开发环境多一个压缩js代码

配置css样式和静态资源

4.打包样式资源

新建demo，文件结构如下

打包样式资源需要css-loader、style-loader两个依赖，下载依赖，执行下面命令

npm i  css-loader  style-loader  -D

配置webpack.config.js 配置文件

//主要用于书写配置自动提示，但是需要再打包的时候注释，不然会报错
// import { Configuration } from "webpack";

const { resolve } = require("path");
/**
 * @type {Configuration}
 */
const config = {
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // use数据中loader顺序执行
          "style-loader",
          "css-loader",
        ],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

module.exports = config;

在index.css文件 html、body标签提供一个样式，并且在index.js 中引入index.css 文件 index.css

html,body{
    background-color: pink;
}

index.js

import "./index.css";

以上配置完成，执行webpack打包命令即可。

webpack

打包完成，我们需要测试样式文件是否打包成功，在build文件夹中，新建index.html 文件，引入打包后的build.js 文件。在浏览器中打开页面，样式文件已经生效。

但是我们在开发过程中，不仅仅是使用css样式文件，可能会用到less，sass样式文件，那我们应该怎么办呢？

我们只需要在webpack.config.js 中的 module中的rules中添加less和sass的规则即可。这里以less为例来说明。

安装less-loader、less依赖
添加rules规则

 {
    test: /\.less$/,
    use: ["style-loader", "css-loader", "less-loader"],
 }

index.less 导入到index.js 文件
执行webpack命令

已经生效

5.打包html资源

新建demo，结构如下

安装html-webpack-plugin 插件，

npm i html-webpack-plugin -D

配置webpack.config.js，配置如下新增以下内容

const HtmlWepackPlugin = require("html-webpack-plugin");

plugins: [
    new HtmlWepackPlugin({
      // 复制 "./src/index.html" 文件
      template: "./src/index.html",
    }),
  ],

完整配置

// import { Configuration } from "webpack";
const { resolve } = require("path");
const HtmlWepackPlugin = require("html-webpack-plugin");

/**
 * @type {Configuration}
 */
const config = {
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [],
  },
  plugins: [
    new HtmlWepackPlugin({
      // 复制 "./src/index.html" 文件
      template: "./src/index.html",
    }),
  ],
  mode: "development",
};

module.exports = config;

执行打包命令 webpack

6.打包图片资源

新建demo文件结构如下，

打包图片资源需要安装url-loader、file-loader，安装url-loader

npm  i url-loader file-loader -D

配置webpack.config.js 文件，在rules中添加以下规则

{
    test: /\.(jpg|png|gif)$/,
    loader: "url-loader",
    options: {
      // 图片小于8kb 就会被base64 处理
      limit: 8 * 1024,
      // 图片重新命名
      // image 将图片输出到images文件夹
      // [name] 图片原来的名称
      // [hash:10] 取图片hash 前10位
      // [ext] 取图片原来的扩展名
      name: "images/[name].[hash:10].[ext]",
    },
},

在index.less 文件中添加样式，并且引入图片，在index.js 中导入index.less 文件
执行webpack命令，结果如下，打包的图片资源已经生效

打包结果也按照我们设置的执行

如果我们在html页面中写入了img标签这种形式，安照上述的配置，我们不能打包成功，所以需要接着配置webpack.config.js

安装html-loader

npm i html-loader -D

配置rules

  {
    test: /\.html$/,
    // 处理html中的img图片（负责引入img,从而被url-loader进行处理）
    loader: "html-loader",
    options: {
      // 因为url-loader 默认使用es6模块化解析 而html-loader 引入图片是commonjs 解析会出现问题导致图片不显示
      // 关闭url-loader 的es6模块化，使用commonjs 解析
      esModule: false,
    },
  },

重新执行打包命令，html页面中写入的img标签显示出来

需要注意，我们需要关闭esModule，因为因为url-loader 默认使用es6模块化解析而html-loader 引入图片是commonjs 解析会出现问题导致图片不显示的问题

7.配置devserver

我们之前配置的环境在写代码或者修改代码的时候，每次修改完都需要重新使用webpack先打包，然后再浏览器中打开打包后的htnl文件，这样很不方便，所以我们这里需要配置devserver

安装devserver，安装命令如下

npm i  webpack-dev-server -D

在webpack.config.js中添加如下代码

devServer: {
    //  项目构建后路径
    contentBase: resolve(__dirname, "build"),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    //自动打开浏览器
    open: true,
 },

执行命令npx webpack server 启动，我们可以看到在默认的浏览器中打开页面，并且启动了一个端口为3000，http://localhost:3000 即可看到我们的成果。

我们修改代码保存后代码会自动编辑，并且自动刷新页面，这样可更快捷高效的编码

8.将css样式提取成单独的样式文件

之前的配置，打包后的css样式代码全部是在js文件中，现在我们需要将css单独提取成css文件

新建a.css、b.css文件，分别写入样式，在index.js 中引入样式文件。结构如下

安装 mini-css-extract-plugin 插件

npm i mini-css-extract-plugin -D

配置webpack.config.js

获取 MiniCssExtractPlugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

需要将style-loader 替换成MiniCssExtractPlugin.loader

use: [
      //  "style-loader",
      // 取代style-loader 提取css文件为单独文件
      MiniCssExtractPlugin.loader,
      "css-loader",
],

添加插件 MiniCssExtractPlugin

plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "css/build.css",
    }),
 ],

执行打包命令，打包结果如下，css样式文件被提取至build.css

9.css兼容性处理

在前端开发中，可能遇到各种各样的浏览器和不同的浏览器版本，所以需要我们的css适应各种版本的浏览器。

安装插件

npm i postcss-loader postcss-preset-env  -D

配置webpack.config.js

添加postcss-loader

/**
* css 兼容性处理 ：postcss-->postcss-loader  postcss-preset-env
* 帮postcss 找到package.json中的 browserlist里面的配置，通过配置加载指定的css兼容性
*/
// 使用loader的默认位置
// 'postcss-loader,

// 修改loader的位置
{
loader: "postcss-loader",
options: {
  postcssOptions: {
    ident: "postcss",
    // postcss插件
    plugins: [require("postcss-preset-env")],
  },
},
},

在package.json 中添加 browserslist

 "browserslist": {
    "development": [
      "last 1 chrome  version",
      "last 1 firefox  version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

在css中添加css3属性，用于测试，postcss兼容性是否生效
查看打包后的build.css 中css3属性是否添加兼容属性

10.css压缩

安装 optimize-css-assets-webpack-plugin

 npm i optimize-css-assets-webpack-plugin  -D

配置webpack.config.js

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

 plugins: [
    new OptimizeCssAssetsWebpackPlugin(),
 ],

完整webpack.config.js 配置

//import { Configuration } from "webpack";

const { resolve } = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

// process.env.NODE_ENV = "development";

//optimize-css-assets-webpack-plugin

/**
 * @type {Configuration}
 */
const config = {
  entry: "./src/js/index.js",
  output: {
    filename: "js/build.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                ident: "postcss",
                // postcss插件
                plugins: [require("postcss-preset-env")],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "css/build.css",
    }),
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  mode: "development",
};
module.exports = config;

11.压缩js和html

压缩js代码，只需要将开发模式修改为生产环境即可 mode: "production"，
html压缩

plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      // html压缩
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      },
    }),
  ],

Webpack学习记录