简单了解webpack基础配置

一、什么是webpack？为什么要使用webpack？

官方解释： webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

没看懂？是滴，我也一头雾水，先不管这个，先看下面文章，了解一下模块的演化过程。

文章链接：[ https://www.jianshu.com/p/ff1ed54863ad ]

先提一下webpack的四个核心概念：

• entry: 入口
• output: 输出
• loader: 模块转换器，用于把模块原内容按照需求转换成新内容
• 插件(plugins): 扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情

不理解没关系，下面会一一举例，一个一个来嘛，永远相信，要想把知识学到手，最好的办法就是，碰见问题时找出解决这个问题的方法，那么这个方法将被记得很清楚，这就是所谓的学以致用，学再多，没用过，白学。

二、webpack的使用

1、初始化项目： 创建一个文件夹，随便命名（别太随便，最起码你看到后知道这是干啥的），进入文件夹后打开powershell，输入 npm init -y 我们来进行初始化。初始化后，你会发现空文件夹里面多了一个json文件。

2、安装webpack： npm install webpack-cli -D npm install webpack -D (两个可以写一块儿，没必要分开安装)

3、我们在项目文件夹内创建一个名字为src的文件夹，并在src内部创建一个index.js文件，随便在js文件里写一些方法，或者写一个类，来创建一个对象

4、构建初体验： index.js文件编辑完毕后，可以使用 npx webpack --mode=development 命令来进行构建尝试, 这里的模式要是不设置的话，他会默认为production模式。所以这里我们设置开发模式。下面是我们输入构建命令后的结果：

构建完成后，我们发现项目文件夹内部多了一个名字为dist的文件夹，打开后里面有个一个main.js文件，如下：（这里只截取了我们在自己编写的代码被处理后的结果。详细代码，要看main.js文件）

我们会发现，并没有转义为低版本代码，从哪了可以看到呢？

这里使用了 const 关键字，但是我们的目的是为了将高版本代码向低版本（或者说浏览器能够识别的版本）转换。这样的结果显然不符合我们的期望。这时就需要文章开头所提到的四个核心概念之一 loader，它用于对原代码进行转换。而将代码向低版本转换，我们需要 babel-loader

5、安装babel-loader：

打开powershell，输入命令 npm install babel-loader -D, 另外我们还需要配置babel，需要安装以下内容：

npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/runtime-corejs3

至于为什么要安装，那就需要去读一下babel：【https://juejin.im/post/6844904008679686152#heading-6】，这里暂时不解释（因为写这些东西的时候我还没看深入了解babel）

6、 创建webpack.config.js文件

第五步内容安装完后，我们在项目文件夹里创建webpack.config.js文件来配置webpack，创建完毕打开，输入一下代码：

     module.exports = {
       module: {
         rules: [
           {
             test: /\.jsx?$/,
             use: ['babel-loader'],
             exclude: /node_modules/ // 排除 node_modules目录
           }
         ]
       }
     }

配置babel： 1、可重新创建一个（.babelrc)文件对babel单独配置。2、也可以直接在webpack.config.js内部一起配置。

单独创建文件配置：

和webpack一起

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,  // 匹配规则，针对符合规则的文件进行处理
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  "corejs": 3
                }
              ]
            ]
          }
        },
        exclude: /node_modules/ // 排除 node_modules目录
      }
    ]
  }
}

babel的配置已经完毕

7、mode 配置项
告知 webpack 使用相应模式的内置优化。添加一个mode项，将值设置为想要的模式（dev。。 或者 prod。。）

这样，就不需要每次执行 npx webpack 时 在后面加mode选项了

8、在浏览器中查看我们的页面

安装一个插件并配置：npm install --save-dev html-webpack-plugin ，这里要注意，在webpack.config.js文件里，我们要分清楚插件和loader的区别，分开配置，不能搞混淆。

const HtmlWebpackPlugin = require("html-webpack-plugin");
var path = require("path");
module.exports = {
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/, // 排除 node_modules目录
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  "corejs": 3
                }
              ]
            ]
          },
        },
      },
    ],
  },
  // 插件配置
  plugins: [
    // 这里就是上面命令所安装的插件，他的功能是去指定html文件并将index.js文件通过babel后嵌入页面内
    new HtmlWebpackPlugin({
      title: "My App",
      filename: "index.html",
    }),
  ],
};

配置完之后，还需要安装一个依赖：npm install webpack-dev-server -D npm install cross-env -D
还要修改package.json文件中的script对象，添加dev和build属性

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack"
  },

也可在webpack.config.js文件中添加devServer属性，进行配置

在powershell中运行命令 npm run bulid 之后 npm run dev 开启项目，打开浏览器，输入所配置端口号即可（localhost: 3000）

9、处理样式文件

webpack 不能直接处理 css，需要借助 loader。如果是 .css，我们需要的 loader 通常有： style-loader、css-loader，还需要 postcss-loader， less-loader 和 sass-loader，一起配置一下 less 和 css 文件(sass 的话，使用 sass-loader即可):

安装loader：

1. style-loader: npm install style-loader -D 功能: 动态创建 style 标签，将 css 插入到 head 中.
2. css-loader: npm install css-loader -D 功能： 负责处理 @import 等语句。
3. less-loader: npm install less-loader -D 功能： 负责处理编译 .less 文件,将其转为 css

三个loader，可一起安装，npm不行时可以试试cnpm，接下来就是loader配置问题，具体可以参考webpack官网，很详细

做一个简单的引用，之后在src文件夹中创建一个.less样式文件，并使用less编写一个样式，比如：

     @color: red;
     body {
       background: @color;
       transition: all 10s;
     }

然后将此.less文件引入index.js文件中，再运行 npm run build 打包，再次启动页面，页面背景颜色变红，就成功了。

10、图片、字体文件处理

背景颜色已经搞定，但是在实际开发中，我们也需要图片背景，比如：

如果未安装对应loader，打包时就会报错。这里我们就需要用到url-loader 或者 file-loader 具体内容到官网上查，简单粗暴一点，直接安装 ： npm install file-loader -D npm install url-loader -D， 然后在配置文件里面进行配置：

在此运行打包命令 npm run build 完成后看网页，就成功了，（这里可能会出现一些问题，注意看官网配置，针对不同报错进行处理）

11、入口文件

入口的字段名称为： entry

//webpack.config.js
module.exports = {
    entry: './src/index.js' //webpack的默认配置
}

entry 的值可以是一个字符串，一个数组或是一个对象。字符串的情况无需多说，就是以对应的文件为入口。
为数组时，表示有“多个主入口”，想要多个依赖文件一起注入时，会这样配置。例如:

entry: [
    './src/polyfills.js',
    './src/index.js'
]

12、出口配置
配置 output 选项可以控制 webpack 如何输出编译文件。

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), //必须是绝对路径
        filename: 'bundle.js',
        publicPath: '/' //通常是CDN地址
    }
}

具体参考官网配置