webpack4.x最佳实践-3.webpack中的基本概念

基本概念

moudle

moudle 即模块，是针对源文件来说的，简单的理解一个文件就是一个模块，一个js就是一个模块，一个css文件就是一个模块，一个图片也是一个模块，

上文中的index.js、header.js、sidebar.js、content.js都是一个个模块

bundle

bundle 是一个打包结果文件，是针对生成文件来说的，上文示例中经打包生成的main.js，就是一个bundle

chunk

chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。

loader

模块加载器，默认情况下，webpack只认识js文件，css、less、jsx、vue、ts、png…等其他文件一概不认识，那么就需要对应的加载器来加载这些类型的文件，将其转化为webpack可识别的文件

plugin

用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)，可以想象webpack的打包过程是一个流水线，它将一些有用的时机向外暴漏出来，外界就可以利用这些时机加入自己的处理逻辑，实现这个注入过程的就是plugin。

配置文件中的重要概念

entry

如上图所示，在多个代码模块中会有一个起始的 .js 文件，这个便是 webpack 构建的入口。webpack 会读取这个文件，并从它开始解析依赖，然后进行打包。如图，一开始我们使用 webpack 构建时，默认的入口文件就是 ./src/index.js。

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

// 上述配置等同于
module.exports = {
  entry: {
    main: './src/index.js'
  }
}

// 或者配置多个入口
module.exports = {
  entry: {
    main: './src/main.js',
    sub: './src/sub.js', 
    // ...
  }
}

output

webpack 的输出即指 webpack 最终构建出来的静态文件，可以看看上面 webpack 官方图片右侧的那些文件。当然，构建结果的文件名、路径等都是可以配置的，使用 output 字段：

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

默认创建的输出内容就是 ./dist/main.js。

mode

mode是webpack是否启用自带优化处理的依据

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

module

定义了webpack如何处理不同类型的模块，每一类模块(js、jsx、vue、png、css、less等)必须在此配置处理的方法

module: {
  // ...
  rules: [
    {
      test: /\.jsx?/, // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
      include: [
        path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过 loader 处理
      ],
      use: 'babel-loader', // 指定使用的 loader
    },
  ],
}

plugins

在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。通过添加我们需要的 plugin，可以满足更多构建中特殊的需求。

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ],
}

resolve

用于配置路径别名、默认文件后缀等

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '~': resolve('src'),
    }
}

devServer

在mode=‘development’模式下生效，用于配置代理等

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    disableHostCheck:true,//授权的 host
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },

devtool

用于配置source-map

devtool: 'cheap-module-eval-source-map',

一份简单那的配置

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

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

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

  module: {
    rules: [
      {
        test: /\.jsx?/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: 'babel-loader',
      },
    ],
  },

  // 代码模块路径解析的配置
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, 'src')
    ],
    extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '~': resolve('src'),
    }
  },

  plugins: [
    new HtmlWebpackPlugin(),
  ],
}