webpack基础入门

一、核心概念

• Entry：入口，Webpack执行构建的第一步是从Entry开始，可抽象为输入；
• Module：模块，在Webpack里一切皆模块，一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块；
• Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割；
• Loader：模块转换器，用于将模块的原内容按照需求转换为新内容；
• Plugin：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果或者做我们想做的事；
• Output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出的结果。

大致流程如下：
Webpack在启动后会从Entry里配置的Module开始，递归解析Entry依赖的所有Module。每找到一个Module，就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析当前Module依赖的Module。这些模块会根据Entry为单位进行分组，一个Entry及其所有依赖的Module被分到一个组内，也就是一个Chunk。最后，Webpack会将所有Chunk转换成文件输出。在整个流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑。

详解Webpack核心概念

（一）、Entry

Entry配置是必填的，如果不填将会导致Webpack报错，退出。
1、context：Webpack在寻找相对路径的文件时会以context为根目录，context默认为执行启动Webpack时所在的当前工作目录。

context: path.resolve(__dirname, '../'),

需要注意的是，context必须是一个绝对路径的字符串。
2、Entry类型：可以为string、array、object三者中任意类型。

• string：'./app/entry'、入口模块的文件路径，可以是相对路径；
• array：['./app/entry1','./app/entry2']、入口模块的文件路径，可以是相对路径；
• object：{a:'./app/entry'，b:['./app/entry1','./app/entry2']}，配置多个路口，每个入口生成一个chunk。

3、Chunk的名称
Webpack会为每个生成的Chunk取一个名称，Chunk的名称和Entry的配置有关。

• 如果Entry是一个string或array，就只会生成一个Chunk，这时Chunk的名称是main；
• 如果Entry是一个object，那么会出现多个Chunk，这时Chunk的名称是object键值对中键的名称。

4、为MPA应用配置Entry

在untils.js文件中添加如下代码逻辑：

// untils.js
const path = require('path')
const glob = require('glob')
const PAGE_PATH = path.resolve(__dirname, '../src/pages');
exports.entries = function() {
     
 var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
 var map = {
     }
 entryFiles.forEach((filePath) => {
     
   var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
   map[filename] = filePath;
 })
 return map;
}

替换webpack.base.config.js中module.exports中的entry：

entry: untils.entries()

（二）、Output

output是一个object，里面包含一系列配置。
1、filename
output.filename配置输出文件的名称，为string类型。如果只有一个输出文件，则可以将他写为静态不变的：filename:'bundle.js';倘若有多个Chunk需要输出，需要借助模板和变量。Webpack会为每个Chunk取一个名称，所以我们可以根据Chunk的名称来区分输出的文件名：filename:'[name].js'.
2、path
output.path配置输出文件存放在本地的目录，必须是string类型的绝对路径。通常通过Node.js中的path模块去获取绝对路径：path：path.resolve(__dirname,'dist_[hashj]');
3、publicPath
output.publicPath配置发布到线上资源的URL前缀，为string类型。默认值为空字符串’’，即使用相对路径。

 output: {
     
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

（三）、Module

1、配置Loader：rules配置模块的读取和解析规则，通常用来配置loader。其类型为数组，数组里的每一项都描述了如何处理部分文件。

• 条件匹配：通过test、include、exclude三个配置项来选中Loader要应用规则的文件；
• 应用规则：对选中的文件通过loader配置项来应用Loader；

 module: {
     
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
     
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
     
        test: /\.js$/,   // 命中js文件
        loader: 'babel-loader',    // 使用babel-loader转换js文件
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]   // 只命中src目录下的js文件，加快webpack搜索速度
      },
      ]
      }

（四）、Resolve

Webpack在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve配置Webpack如何寻找模块对应的文件。可采用默认模块化标准里的规则去查找，也可以自定义。
1、alias：resolve.alias配置项通过别名来将原导入路径映射为一个新的导入路径；
2、extensions：在导入语句没带文件后缀时，Webpack会自动带上后缀去尝试访问文件是否存在。resolve.extensions用于配置在尝试过程中用到的后缀列表。

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

（五）、Plugin

用于Webpack功能扩展，plugins配置项接收一个数组，数组里的每一项都是一个要使用的Plugin的实例，Plugin需要的参数通过构造函数传入。
配置一个MPA应用的多输出扩展功能。
在utils.js中：

const HtmlWebpackPlugin = require('html-webpack-plugin');   //对每个页面单独打包生成一个新页面的插件
const merge = require('webpack-merge')
// 多页面输出配置
exports.htmlPlugin  = function() {
     
  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
  let arr = []
  entryHtml.forEach((filePath) => {
     
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
    let conf = {
     
      template: filePath,
      filename: filename + '.html',
      chunks: [filename],
      inject: true
    }
    if(process.env.NODE_ENV === 'production') {
     
      conf = merge(conf, {
     
        chunks: ['manifest', 'vendor', filename],
        minify: {
     
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

在webpack.dev.conf.js中如下操作：

  plugins: [
    new webpack.DefinePlugin({
     
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    // new HtmlWebpackPlugin({
     
    //   filename: 'index.html',
    //   template: 'index.html',
    //   inject: true,
    //   chunks: ['app']
    // }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
     
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ].concat(utils.htmlPlugin())   // 重点

学习于吴浩麟的《深入浅出Webpack》
MPA和SPA是什么？：可以看下这个哦
码云地址：如何使用vue-cli+webpack搭建一个MPA应用