关于webpack,你要知道的知识

529 阅读3分钟

webpack打包的原理:webpack都有entry、module、loader、chunk、output等配置选项。 webpack首先会根据entry找到对应所依赖的module(webpack会把所有的文件看多模块)进行递归解析,比如main.js、main.ts等等,同时也会根据loader对应的转换规则去转换,这些模块会以entry为单位进行分组,一个entry和其所有依赖的module被分到一个组,也就是一个chunk,最后webpack会把所有chunk转换成文件输出,在整个流程中webpack会在恰当的实际执行plugin定义的逻辑

多种配置类型
导出一个函数
module.exports = function(env,argv){
    return {
    mode: env.production? 'production': 'development'
    entry: './src/main.js',
    resolve: {
    },
    module: {
    rules: [
        {
              test: /\.json$/,
              use: 'json-loader'
          },
      ]
   },
  plugins: []
 }
}
导出多个配置对象
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
  },
  plugins: [],
  resolve: {
    alias: {
      '@': resolve('src'),
    }
  },
  module: {
   rules: [
    {
          test: /\.json$/,
          use: 'json-loader'
      },
  ]
}
导出一个promise

webpack将运行有配置文件导出的函数,并且等到promise返回,便于需要一部加载所需的配置变量,貌似这种方式很少见。 我见的比较多是前两种方式

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './app.js',
        /* ... */
      })
    }, 5000)
  })
}
entry和context
context

Webpack 在寻找相对路径的文件时会以context 为根目录,context默认为执行启动 Webpack 时所在的当前工作目录。

context: path.resolve(__dirname, 'app')
entry

entry: string | [string] object { <key>: string | [string] } (function: () => string | [string] | object { <key>: string | [string] })

// string
entry: 'src/main.js',
// object
entry: {
  main1: "src/main1.js",
  main2: "src/main2.js",
}
// function ,反正这种写法我没见过
entry: () => new Promise((resolve) => resolve(['src/main1.js', './main2.js']))
output

path: 输入目录的路径,该路径是一个绝对路径

path: path.resolve(__dirname, 'dist')

publicPath: 如果是生产环境,将资源托管到CDN上去,这里的地址是demo

publicPath: process.env.NODE_ENV === 'production' ? '/demo' : '/',

filename: 输出文件的名称,这里的[name]可以看做是多个chunk的输出

 filename: '[name].js',

chunkFilename: chunk的文件名称

[id].chunk.js

sourceMapFilename: 此选项会向硬盘写入一个输出文件,只在 devtool 启用了 SourceMap 选项时才使用

sourceMapFilename: '[file].map'

完整的Output的配置,最常用的应该是前面三项

output: {
     path: path.resolve(__dirname, 'dist'),
     publicPath: process.env.NODE_ENV === 'production' ? '/demo' : '/',
     filename: '[name].js',
     chunkFilename: '[id].chunk.js',
     sourceMapFilename: '[file].map',
    
   }
module
babel-loader

用来将Es6/Jsx转化为ES5,例子是JSX转化Es5

 module: {
  rules: 
     {
       test: /\.jsx?$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['es2015', 'react']
         }
       }
     }
     },
CSS-loader
      {
         test: /\.css$/,
         // 排除node_modules下面的文件
         exclude: /node_modules/,
         // 处理的顺序从后到前,即先交个css-loader,再交给style-loader
         use: ['style-loader', 'css-loader']
     }
Image loader
     {
         test: /\.(jpg|png|gif|svg)$/,
         //可以对图片进行大小限制
         loader: "url-loader?limit=10000
      }
reslove
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
pulgin
CommonsChunkPlugin

该插件的作用来用来提取第三方库和公共模块,避免首屏加载的bundle文件或者按需加载的bundle体积过大,从而导致加载时间过长

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
     plugins: [
      new CommonsChunkPlugin({
        name: 'polyfills',
        chunks: ['polyfills']
      })
}

UglifyJs Plugin

该插件的功能是压缩的js代码

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    plugins: [
    new UglifyJsPlugin()
    ]
}

html-webpack-plugin

该插件的作用是生成html文件

const HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
 new HtmlwebpackPlugin({
   title: '',
   filename: 'index.html'
 }),
}
设置全局变量
 const webpack = require('webpack');
 module.exports = {
     plugins: [
         new webpack.ProvidePlugin({
           $: 'jquery',
           jQuery: 'jquery'
         })
     ]
 }
devServer
devServer: {
      port: METADATA.port,
      host: METADATA.host,
      hot: METADATA.HMR,
      public: METADATA.PUBLIC,
      historyApiFallback: true,
      watchOptions: {

      },

      setup: function(app) {

    },

performance
配置性能提示的显示方式。例如,如果您的资产超过250kb,webpack将发出警告通知您。
 performance: {
      hints:
        process.env.NODE_ENV === 'production' &&
        !process.env.VUE_APP_TEST &&
        'warning',
    },
其他
vue-cli3.×搭建的项目就配置一个vue.congfig.js'的文件,简化很多了设置, 具体可以看看我的配置

Vue-Cli 3.0从0 开始搭建项目篇1

更多vue-cli3.x相关知识

// 用来加载svg格式的文件
  chainWebpack: config => {
      const svgRule = config.module.rule('svg')
      svgRule
        .use('vue-svg-loader')
          .loader('vue-svg-loader')
    },
参考链接

阮一峰webpack-demos

webpack中文网

深入浅出webpack