Webpack 的 4 个核心概念

最新推荐文章于 2022-01-22 20:22:42 发布

小豪boy

最新推荐文章于 2022-01-22 20:22:42 发布

阅读量352

点赞数

分类专栏： ES6学习笔记文章标签： node.js vue.js html5

本文链接：https://blog.csdn.net/qq_34771938/article/details/120541191

版权

ES6学习笔记专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、准备工作

1.根据已有的 package.json 文件安装需要的包。

2. 打开命令行工具，输入命令： npm install

3. 安装完成后，项目文件夹中会多出一个 node_modules 文件夹，用于存放安装的包。

二、entry

官方文档：入口起点(entry points) | webpack 中文网
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为打包的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
单入口写法:
module.exports = {
  entry: './src/index.js'
};
多入口写法，需要写成对象的形式：
module.exports = {
  entry: {
     main: './src/index.js',
     search: './src/search.js'
   }
};

三、output

官方文档：输出(output) | webpack 中文网
output 属性告诉 webpack 在哪里输出它所打包后的文件，默认值为 ./dist，以及如何命名这些文件。基本上，整个应用程序结构，都会被编译到这个指定的输出路径的文件夹中。
单入口输出:

// Node.js path 模块提供了一些用于处理文件路径的小工具
// 通常可以通过以下方式引入该模块：
const path = require('path');

module.exports = {
    output: {
        // path.resolve将给定的路径构造成一个绝对路径
        // __dirname表示当前文件所在目录的绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

多入口输出：

// Node.js path 模块提供了一些用于处理文件路径的小工具
// 通常可以通过以下方式引入该模块：
const path = require('path');

module.exports = {
    output: {
        // path.resolve将给定的路径构造成一个绝对路径
        // __dirname表示当前文件所在目录的绝对路径
        path: path.resolve(__dirname, 'dist'),
        // [name] 代表入口对象的键名
        filename: '[name].js'
    }
}

示例：

①测试一下多入口输出的效果。

完整的 webpack.config.js 文件内容：

// Node.js path 模块提供了一些用于处理文件路径的小工具
// 通常可以通过以下方式引入该模块：
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js',
    search: './src/search.js'
  },

  output: {
    // path.resolve将给定的路径构造成一个绝对路径
    // __dirname表示当前文件所在目录的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // [name] 代表入口对象的键名
    filename: '[name].js'
  }
};

② 在命令行运行： npm run webpack

打包后的js文件

③ 使用打包后的js文件运行html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>entry 和 output</title>
  </head>
  <body>
    <script src="./dist/main.js"></script>
    <script src="./dist/search.js"></script>
  </body>
</html>

注：在ie11与chrome浏览器中都能够正确输出。

四、loader

官方文档：loader | webpack 中文网。
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块(modules)，然后你就可以利用 webpack 的打包能力，对它们进行处理。

示例：

所有的loader的使用文档：loaders | webpack 中文网。
例如，使用 babel-loader 告诉 webpack 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。

① 为此，首先安装相对应的 loader 以及相关的 Babel 包：
npm install --save-dev babel-loader@8.1.0
npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0
安装完后的package.json。

② 配置 babel-loader

在 webpack 配置对象（webpack.config.js）中，需要添加 babel-loader 到 module 的 loaders 列表中，像下面这样：
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          // 添加了这个属性后就不需要再创建 Babel 的配置文件了
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

③ 命令行运行：npm run webpack

查看编译后的js文件。

注：Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类，但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块。

查看编译后的代码在浏览器中的运行结果。

④ 补充: 为了让Babel能够同样对ES6 新增的 API进行编译，需要安装一个新的包（core-js）

命令：npm install --save-dev core-js@3.6.5

可参考文档：@babel/polyfill · Babel 。
安装完成后，在需要编译的js文件中导入该模块即可。
import "core-js/stable";
再重新编译查看在浏览器中的运行结果。

注：都能够成功的输出结果，说明Babel对ES6 新增的 API编译成功了。

五、plugins

官方文档：插件(plugins) | webpack 中文网。
各种插件的目录：Plugins | webpack 中文网
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件功能极其强大，可以用来处理各种各样的任务。

以 html-webpack-plugin 插件作为例子演示插件的用法：

① 安装 html-webpack-plugin 插件

html-webpack-plugin 插件将会生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。
html-webpack-plugin 插件文档地址（HtmlWebpackPlugin | webpack 中文网）
命令：npm install --save-dev html-webpack-plugin@4.3.0

② 配置 html-webpack-plugin 插件

③ 运行：npm run webpack

编译打包后的结果。

④ 补充：多页面时 html-webpack-plugin 插件的配置

webpack.config.js 文件

// Node.js path 模块提供了一些用于处理文件路径的小工具
// 通常可以通过以下方式引入该模块：
const path = require('path');
// 引入html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },

  output: {
    // path.resolve将给定的路径构造成一个绝对路径
    // __dirname表示当前文件所在目录的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // [name] 代表入口对象的键名
    filename: '[name].js'
  },
  
  plugins: [
    // 单入口
    // new HtmlWebpackPlugin({
    //   // 提供自己的模板HTML文件，html-webpack-plugin 会自动将所有必要的 CSS、JS、清单和网站图标文件注入到标记中。
    //   template: './3.html'
    // }),

    // 多入口
    new HtmlWebpackPlugin({
      template: './index.html',
      // 定义生成文件的名称
      filename: 'index.html',
      // 指定需要引入的模块，名字与入口对象的键名对应
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      template: './search.html',
      filename: 'search.html',
      chunks: ['search']
    })
  ]
};