前端基础知识之 Webpack

最新推荐文章于 2024-04-04 11:55:29 发布

大杯美式不加糖

最新推荐文章于 2024-04-04 11:55:29 发布

阅读量1k

点赞数

分类专栏：前端文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_40988677/article/details/125900161

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

认识 Webpack

webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件。

Webpack 初体验

初始化项目

npm init

一直敲回车，直至 package.json文件的生成

注意，init 的时候项目名字不能是 webpack，否则会冲突

安装 webpack 需要的包

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

在这里插入图片描述

配置 webpack

在根目录下创建 webpack.config.js 配置文件，使用 webpack 官方文档的例子编写👇

const path = require('path'); // node.js 的内置模块

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

打包并测试

在根目录下新建 src 文件夹，文件夹下新建两个 js 文件 index.js 与 module.js👇

// module.js
export default 18;
console.log('module.js'); 

// index.js
import age from './module.js'
console.log('index.js', age);

编写 package.json 中的 webpack 命令👇

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack --config webpack.config.js"
  },
  "author": "JaeWong",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

运行打包命令👇

npm run webpack

运行结束之后会多出一个 dist 目录，下有一个 bundle.js 文件，具体内部的代码我们不需要去了解。紧接着在根目录下新建 index.html 文件，引入打包后的 js 文件👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script src="./dist/bundle.js"></script>
</html>

控制台会输出👇

module.js
index.js 18

重点是你在 IE 浏览器打开，也是能够看到输出的，如果使用 ES6 的 Module 则不兼容，可以看出 webpack 不仅能够完成打包的操作，同时也解决了兼容性的问题。

Webpack 的4个核心概念

entry

指定的入口文件，有单入口也有多入口👇

const path = require('path');

module.exports = {
  // 单入口
  //entry: './src/index.js', 

  // 多入口
  entry: {
    main: './src/index.js', // 主入口
    search: './src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

output

指定输出的文件👇

// 单入口的输出
output: {
  path: path.resolve(__dirname, 'dist'), // 绝对路径的拼接，__dirname 为当前目录
  filename: 'bundle.js' // 生成的 js 文件名
}

// 多入口的输出，如果还是用上面单入口的输出写法，打包的时候会报错
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js'
}

loader

什么是 loader

loader 让 webpack 能够去处理那些非 JS 文件的模块，例如 CSS 与图片文件。

babel-loader

连接 babel 与 webpack 的枢纽，若 webpack 打包时遇到 JS 文件，则交由 babel 处理

使用以下命令安装👇

npm install --save-dev babel-loader@8.1.0 @babel/core@7.11.0 @babel/preset-env@7.11.0

不要忘了在根目录下新建 .babelrc 文件编写 babel 配置项文件👇

{
  "presets": ["@babel/preset-env"]
}

在 webpack.config.js 中编写 webpack 配置项👇

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    // loader 的配置项
    rules: [
      {
        test: /\.js$/, // 需要将 babel 应用于哪些文件
        exclude: /node_modules/, // 排除的文件
        loader: 'babel-loader'
      }
    ]
  }
};

修改一下 index.js 中的代码，编写几个 ES6 的代码。

紧接着运行打包命令 npm run webpack 就可以在 src 目录下的 bundle.js 文件中看到打包后的代码了。

进入 bundle.js 文件中查看代码，可以发现像 Object.assign() 、Array.from() 类似的方法还是没有被转义，这个和使用 babel 转义的时候效果是一样的，如果需要把 ES6 这些新增的 API 也转义为 ES5 之前的写法，则需要引入其他模块。这里使用的是 core-js 这个包

使用以下命令安装👇

npm install --save-dev core-js@3.6.5

然后在 index.js 中引入👇

import 'core-js/stable'

let name = 'Jae';
const age = 18;
const add = (x, y) => x + y;
new Promise((res, rej) => {
  res('sucess');
}).then(value => {
  console.log(value);
});
Array.from([1, 2])
class Person {
  constructor(name, age) {
    Object.assign(this, { name, age });
  }
}
new Person('Jae', 18);

此时再运行一下打包命令👇

npm run webpack

打包完后 dist 目录下的 bundle.js 文件还是挺乱的，不需要去关注具体的代码。在 index.js 文件中输出一下 name、age 变量，重新打包后将该 JS 文件引入到 index.html 文件中，然后在 IE11 中打开，你会发现是有输出的，如果没有转义成功的话，IE11 是不认识这些 ES6 代码的。

如果你想要知道不同的文件需要什么 loader，可以去官网查询

plugins

loader 被用于帮助 webpack 处理各种模块，而插件则可以用于执行范围更广的任务

安装 html-webpack-plugin

之前在打包后，需要手动在 html 文件中引入 js 文件。如果使用了这个插件，则会自动帮我们生成了，同时也会将 html 文件生成到 dist 文件夹中。

输入以下命令安装👇

npm install --save-dev html-webpack-plugin@4.3.0

配置 html-webpack-plugin

在根目录下新建 example.html 文件，然后到 webpack.config.js 中进行配置👇

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin'); // 引入模块

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './example.html' // 需要打包到 dist 下的 html 文件
    })
  ]
};

然后运行打包命令 npm run webpack，你会发现 dist 文件夹下多了一个index.html，且 bundle.js 也已经被自动引入了。

多入口时配置 html-webpack-plugin

在根目录下新建 index.html、second.html、example.html，同时在 src 目录下新建 index.js、second.js、example.js，此时有三个入口文件需要打包，这时候该怎么配置呢？🤔

在这里插入图片描述
修改一下 webpack.config.js👇

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  // 多入口
  entry: {
    index: './src/index.js',
    second: './src/second.js',
    example: './src/example.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js' // 多入口时这边需要修改，不然打包时文件名会冲突
  },
  plugins: [
    // 单入口
    // new HtmlWebPackPlugin({
    //   template: './example.html'
    // })

    // 多入口
    new HtmlWebPackPlugin({
      template: './index.html'
    }),
    new HtmlWebPackPlugin({
      template: './second.html'
    }),
    new HtmlWebPackPlugin({
      template: './example.html'
    })
  ]
};

运行 npm run webpack 命令，此时会看到 dist 文件夹下已经生成了 index.html、index.js、second.js、example.js 四个文件。但是你会发现这个index.html 文件中其实是根目录下 example.html 的模板，然后引入了三个 js 文件，这个情况是和我们的预期有所出入的。

这是因为在配置文件中没有进行打包后文件的命名，所以默认所有文件打包完之后都叫 index.html，因此我们在配置文件中加上打包后的文件命名👇

const path = require('path'); 
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    second: './src/second.js',
    example: './src/example.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    // 单入口
    // new HtmlWebPackPlugin({
    //   template: './example.html'
    // })

    // 多入口
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html' // 打包后的文件名
    }),
    new HtmlWebPackPlugin({
      template: './second.html',
      filename: 'second.html' // 打包后的文件名
    }),
    new HtmlWebPackPlugin({
      template: './example.html',
      filename: 'example.html' // 打包后的文件名
    })
  ]
};

运行打包命令后，此时又会发现，虽然生成了三个 html 文件，但是每个 html 文件中都引入了三个 js 文件，这个情况也是不对的。需要在配置文件再加上一个配置项👇

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    second: './src/second.js',
    example: './src/example.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    // 单入口
    // new HtmlWebPackPlugin({
    //   template: './example.html'
    // })

    // 多入口
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html',
      chunks: ['index'] // 指定文件，不需要后缀名
    }),
    new HtmlWebPackPlugin({
      template: './second.html',
      filename: 'second.html',
      chunks: ['second'] // 指定文件，不需要后缀名
    }),
    new HtmlWebPackPlugin({
      template: './example.html',
      filename: 'example.html',
      chunks: ['example'] // 指定文件，不需要后缀名
    })
  ]
};

html-webpack-plugin 的其他功能

使用 minify：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    second: './src/second.js',
    example: './src/example.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    // 单入口
    // new HtmlWebPackPlugin({
    //   template: './example.html'
    // })

    // 多入口
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html',
      chunks: ['index'],
      minify: {
        // 删除 index.html 中的注释
        removeComments: true,
        // 删除 index.html 中的空格
        collapseWhitespace: true,
        // 删除各种 html 标签属性值的双引号
        removeAttributeQuotes: true
      }
    }),
    new HtmlWebPackPlugin({
      template: './second.html',
      filename: 'second.html',
      chunks: ['second']
    }),
    new HtmlWebPackPlugin({
      template: './example.html',
      filename: 'example.html',
      chunks: ['example']
    })
  ]
};

运行一下打包命令，来对比一下打包后 dist 目录下 index.html 文件与其他 html 文件的差别👇

index.html：
在这里插入图片描述
second.html：

Webpack 的应用

处理 CSS 文件

在 src 目录下新建 index.css 与 index.html 文件，css 文件中随便编写几个样式代码，例如：

body {
  background-color: pink;
}

在之前我们一般是在 html 文件中使用 link 标签导入 css 文件的，现在使用了 webpack，就可以直接在 js 文件中导入 css 文件了。具体操作看下面 👇

// index.js
import './index.css';

// webpack.config.js
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html'
    })
  ]
};

运行 npm run webpack 后你会发现命令行报错了，显示不能识别 css 文件。

这时候就需要安装 css 的 loader 了，运行以下命令：

npm install --save-dev css-loader@4.1.1

安装完之后进行配置项的编写 👇

//webpack.config.js
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'css-loader
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html'
    })
  ]
};

紧接着可以运行一下打包命令，这下就不会报错了。

但是如果在浏览器打开这个 dist 目录下的 index.html 文件，你会发现背景色并没有变成粉色，这是什么回事呢？🤔

这是因为虽然安装 css-loader 之后 webpack 能够识别 css 文件了，但是却不知道怎么处理，也就是并没有将 css 文件引入到 html 文件中来。

大家都知道，平时将 css 文件引入到 html 文件中一般是两种方法，一个是使用 style 标签，一个是通过 link 引入。这里我们先通过 style 的形式引入。

运行以下命令安装 style-loader 👇

npm install --save-dev style-loader@1.2.1

修改一下 webpack 配置文件：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader: 'css-loader' // 单个 loader
        // 多个 loader
        use: ['style-loader', 'css-loader'] // 注意顺序，是从右到左执行的
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html'
    })
  ]
};

再运行一下打包命令，通过浏览器打开 dist 文件夹下的 index.html 文件，你会发现此时的背景色生效了！

有些人可能会希望通过 link 标签的方式引入 css，这该怎么做呢？

让我们再引入一个 loader：

npm install --save-dev mini-css-extract-plugin@0.9.0

安装完之后再修改一下 webpack 的配置文件：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'] // 官方文档的写法，查阅文档
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

运行一下打包命令就大功告成了：

在这里插入图片描述

处理 CSS 文件中的图片

在 src 文件夹下新建一个 images 文件夹，然后放入一张图片。接着修改一下 src 目录下的 index.css 文件👇

body {
  background: url('images/location.png');
}

运行打包命令，你会发现命令行报错了，提示无法处理图片，建议我们寻找合适的 loader 来处理这种文件类型。

注意：如果你这里使用的不是本地的图片，是可以成功被打包的，因为外部的资源不需要考虑 webpack，只有本地的图片才需要被 webpack 处理。

因此我们需要安装 file-loader 来处理 CSS 中的图片：

npm install --save-dev file-loader@6.0.0

安装完之后一样修改一下 webpack 文件：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.(jpg|jpeg|png|gif)$/, // 匹配图片格式
        use: 'file-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

运行打包命令，会发现这时候不报错了，而且图片也从 src/images 被打包到 dist 文件夹下了：

在这里插入图片描述
但是打开 dist 目录下的 css 文件夹中的 main.css，你会发现变成了这样：

在这里插入图片描述

这是直接把打包后的文件名替换到这里了啊，那肯定是不对的，在打开浏览器后也会发现这个图片并没有生效。

这是因为之前配置 mini-css-extract-plugin 的时候，让打包后的 css 文件是位于 dist/css 下：

new MiniCssExtractPlugin({
  filename: 'css/[name].css' // 指定 css 文件在打包后是位于 dist/css/xxx.css
})

而 file-loader 只是将文件复制一份到 dist 下，所以是二者之间没有协调好的原因。解决方法是修改一下 webpack 配置文件中 mini-css-extract-plugin 的 rules：

rules: [
  {
    test: /\.css$/,
    // use: [MiniCssExtractPlugin.loader, 'css-loader']
    use: [{
       loader: MiniCssExtractPlugin.loader,
       options: {
         publicPath: '../'
       }
    }, 'css-loader']
  },
  {
    test: /\.(jpg|jpeg|png|gif)$/, // 匹配图片格式
    use: 'file-loader'
  }
]

再运行一下打包命令，会发现打包后的 main.css 文件下的图片路径前面就会加上 ../ 了，这时路径也就对得上了。

如果想让图片跟 css 文件一样，打包后可以在某个文件夹下，该怎么做呢？同样的，来修改一下 webpack 配置文件中 file-loader 的 rules：

rules: [
  {
    test: /\.css$/,
    use: [{
       loader: MiniCssExtractPlugin.loader,
       options: {
         publicPath: '../'
       }
    }, 'css-loader']
  },
  {
    test: /\.(jpg|jpeg|png|gif)$/, // 匹配图片格式
    // use: 'file-loader'
    use: {
       loader: 'file-loader',
       options: {
         name: 'img/[name].[ext]'
       }
    }
  }
]

打包完之后就 ok 啦：

在这里插入图片描述

处理 HTML 中的图片

在根目录下中的 index.html 文件中使用图片：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="./src/images/location.png" alt="">
</body>
</html>

直接引用上一节《处理 CSS 文件中的图片》中的配置，先用 file-loader 试试看可不可行

在此之前将上一节中 src 文件夹下的 index.css 文件改回使用背景色：

body {
  background-color: pink;
}

然后运行打包命令👇

在这里插入图片描述

你会发现运行完之后 dist 文件夹下连图片都没有，这是因为 mini-extract-plugin 只会处理 CSS 文件，如果有遇到图片，交由 file-loader 处理。而 webpack 本身是不会处理 html 文件的，所以 html 文件中的图片没有被打包到 dist 目录下。

此时需要的是一个能够处理 html 中图片的loader，就是它啦👇

npm install --save-dev html-withimg-loader@0.1.16

同样的，在 webpack 的配置文件中的 rules 增加相关配置：

rules: [
  // ...
  {
    test: /\.(htm|html)$/,
    loader: 'html-withimg-loader'
  }
]

然后运行打包命令之后，可以看到：

在这里插入图片描述

图片已经过来了，但是看一眼 index.html：

在这里插入图片描述
img 的链接怎么是个对象？

这其实又是 file-loader 的锅，它是按照 es module 导出的，所以需要加这么一个配置：

rules: [
  // ...
  {
    test: /\.(jpg|jpeg|png|gif)$/,
    use: {
       loader: 'file-loader',
       options: {
         name: 'img/[name].[ext]',
         esModule: false // 不要按模块
       }
    }
  }
  // ...
]

再次打包，就完全没问题啦~

url-loader 处理图片

url-loader 相对 file-loader 的好处是允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数，如果文件大于该阈值，会自动的交给 file-loader 处理。但是它的底层同样是使用 file-loader，在安装的时候两个 loader 都需要安装。

前几节已经安装了 file-loader，现在单独安装 url-loader 就可以了

npm install --save-dev url-loader@4.1.0

在配置的时候只需要将之前 file-loader 的配置改为 url-loader ，再添加一个阈值的配置即可：

rules: [
  // ...
  // {
    // test: /\.(jpg|jpeg|png|gif)$/,
    // use: {
       // loader: 'file-loader',
       // options: {
         // name: 'img/[name].[ext]'
       // }
    // }
  // }
    test: /\.(jpg|jpeg|png|gif)$/,
    use: {
       loader: 'url-loader',
       options: {
         name: 'img/[name].[ext]',
         limit: 3000 // 3k
       }
    }
  // ...
]

可以在 src 目录下的 index.js 文件中引入这个图片并且输出：

import './index.css';
import img from './images/location.png'

console.log(img);

打包后在浏览器打开 dist 下的 index.html 控制台，你会发现输出的是 Base64 格式的路径

使用 webpack-dev-server 搭建开发环境

这样就不用每次修改完都需要进行重新删除dist重新打包重新打开等等等等一系列繁琐的操作啦

直接来安装：

npm install --save-dev webpack-dev-server@3.11.0

然后在 package.json 中新增命令：

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --open chrome"
  },
  "author": "JaeWong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}