项目中webpack配置文件详解(一)

最近在用react+webpack做项目，因为自己对这两个都不是很了解，感觉react+redux+react-router还好上手一点，但是webpack更吃力一点，现在经常用到的配置都有了，谈谈自己的理解，希望对大家有一点点帮助 \(^o^)/~

webpack配置文件是webpack.config.js，整个文件遵循commonJS规范，所以可以使用，require、module.exports等语法。

完整文件放到最后，下面逐行解释。

module.exports = {
  entry: {
    index: "./src/index.js"
  }

首先是entry，这个是配置webpack入口，结合webpack插件htmlWebpackPlugin使用，将入口文件渲染到htmlWebpackPlugin中，下面解释一下htmlWebpackPlugin。

const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Custom template',
      // Load a custom template (lodash by default see the FAQ for details)
      template: 'index.html'
    })
  ]

其中，template是指定模板文件位置，title是定义一个标题。在html中可以这样取到title属性。

<title><%= htmlWebpackPlugin.options.title%></title>

接下来是output

const path = require("path"); 
 output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js"
  }

path是node自带的库，所以不需要额外安装，可以直接使用。path.resolve()方法会拼接参数，然后返回一个路径，像我们的例子中，会返回配置文件所在文件夹下的dist目录这个路径。

output这个配置项是打包项目用的，filename参数，顾名思义就是打包后生成的文件名，[name]就是当前打包的文件名，这样配置就相当于现在文件叫什么，打包后还是什么。下面放一下package.json里面的build指令。

  "scripts": {
    "build": "rd /s/q dist && webpack --config webpack.config.prod.js"
  },

下一项是mode

mode: 'development'

mode的作用是配合definePlugin生成一个可以全局访问的变量，通过这个变量我们知道我们当前设置的模式是什么，然后做一些判断，比如开发模式，我就输出一些东西方便调试，然后运行模式，就不输出。我没有用这个definePlugin，所以不多解释，以免误导大家。

接下来是module

module: {
    rules: [
      {
        test: /\.(js|jsx|mjs)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env", "@babel/preset-react"
            ],
            plugins: [
              "@babel/plugin-proposal-class-properties", // es6 class定义转换
              "@babel/plugin-transform-runtime", //处理async awaiit支持
              [ //装饰器
                "@babel/plugin-proposal-decorators", {
                  "legacy": true
                }
              ]
            ]
          }
        }
      }, {
        test: /\.(css|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      }, {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }, {
        test: /\.(ttf|eot|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
          outputPath: 'images/'
        }
      }
    ]
  }

这个就是比较重要的部分了，定义一些规则来解析我们的jsx，js，sass，图片，字体等。

test表示匹配项，loader表示我们使用的loader，这些loader都需要用node安装。然后在解释一下处理css和scss文件时用到的一个插件。

然后介绍一下extract-text-webpack-plugin

const ExtractTextPlugin = require("extract-text-webpack-plugin");
  plugins: [
    new ExtractTextPlugin('style.css')
  ]

这个插件是用来拆分样式文件，把所有的样式文件都抽离出来放到style.css中，防止跟js混在一起。

还有注意的是loader的加载顺序，postcss-loader要放在css-loader跟sass-loader中间。

下一篇继续介绍postcss-loader以及配置文件剩余的内容。

项目中webpack配置文件详解(一)

项目中webpack配置文件详解(一)

猜你喜欢