wbpack基础知识

wbpack解说

1.loader

webpack 只能理解 JavaScript 和 JSON 文件。（即对于其他的css、html文件无法进行识别）。这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中，loader 有两个属性：

1. test 属性，识别出哪些文件会被转换。
2. use 属性，定义出在进行转换时，应该使用哪个 loader。

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

上面那句代码的意思相当于说:“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先 use(使用) raw-loader 转换一下。

注意：

请记住，使用正则表达式匹配文件时，你不要为它添加引号。也就是说，/\.txt$/ 与 '/\.txt$/' 或 "/\.txt$/" 不一样。前者指示 webpack 匹配任何以 .txt 结尾的文件，后者指示 webpack 匹配具有绝对路径 ‘.txt’ 的单个文件; 这可能不符合你的意图。

2.插件（plugin）

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

3.模式(mode)

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

module.exports = {
  mode: 'production',
};

4.浏览器兼容性

Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill

5.使用不同的配置文件

如果出于某些原因，需要根据特定情况使用不同的配置文件，则可以通过在命令行中使用 --config 标志修改。

package.json

"scripts": {
  "build": "webpack --config prod.config.js"
}

6.学习路线图

7.webpack大致打包流程图

8.webpack 打包学习

打包的样式文件并不会在输出文件的目录下进行输出，而是暑促到了打包后的bundle.js文件中。

需要全局安装webpack和webpack-cli（webpack命令行工具），

然后再到该项目中局部安装 webpack和webpack-cli -----安装到开发环境即可。

8.1 webpack.config.js文件解说

lodader的配置

header：即为html文件中的header标签

less

htmlwebpackPlugin 插件

这里会自动将打包输出的bundle.js文件引入到配置文件中对应的html文件中。所以就不需要我们自动引入。

图片处理

通过引入[`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) 插件：

src目录下的index.html文件引入图片，src变成了object

解决办法；

学习进度

b站学习网址：https://www.bilibili.com/medialist/play/ml1258509988/BV1u7411c7GX

看到第 6集

9.常用命令

终端输入 …代表返回上一级目录

10.webpack的哪些坑

问题：一直报没有配置less的loader（因为我已经在webpack.config.js中配置了）后面发现官网上面有一种配置方法。如下。最后居然成功了。看来是程序找不到对应的包造成的。具体配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                paths: [resolve(__dirname, 'node_modules')],
              },
            },
          },
        ],
      },
    ],
  },
};

11.devserver

作用：通过devserver可以对项目进行自动打包

其中的open=true代表自动打开浏览器（即项目运行时）

13.构建环境配置

开发环境要做的事情太多，所以有些放在生产环境去做。

14.提取多个css文件为一个单独的文件

还可以对输出的文件路径进行重命名：

15.css兼容性处理

注意：这个环境变量跟下方得mode没有关系。

如果没有配置生产环境默认就会使用开发环境

16.压缩css

loader能做的事情比较少，大部分的事情都是通过插件来做的。

17.js语法检测eslint

需要下载eslint-loader、eslint、

语法检查只争对于js进行检查（不对第三库进行检查）

设置检查规则（

在package.json中的eslintConfig配置