Webpack配置详解

Webpack相关文章

• Webpack的基本使用
• Webpack的性能优化

entry

1.string类型

• 单入口
• 打包形成一个chunk
• 输出一个bundle文件。此时chunk的默认名称是main

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

2.array类型

• 多入口
• 所有入口文件最终只会形成-一个chunk,输出出去只有一个bundle文件
• 只有在HMR功能中让html热更新生效

module.exports = {
  entry: ['./src/index.js', './src/add.js'],
  ...
}

3.object类型

• 多入口
• 有几个入口文件就形成几个chunk，输出几个bundle文件
• 此时chunk的名称是key

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

4.特殊用法

module.exports = {
  entry: {
    //所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件
    index:  ['./src/index.js', './src/count.js'],
    //形成一个chunk，输出一个bundle文件。
    add: './src/add.js'
  },
  ...
}

output

module.exports = {
  ...
  output:{
    // 文件名称 (指定名称+目录)
    filename: ' js/[name].js',
    //输出文件目录(将来所有资源输出的公共目录)
    path: resolve(__dirname, 'build'),
    //所有资源引入公共路径前缀(比如html中引入js)--> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: '[name]_chunk.js', //非入口chunk的名称 比如通过import语法引入的文件
    // libraryTarget: 'window' //变量名添加到哪个上 browser
    // libraryTarget: 'global' //变量名添加到哪个上 node
    libraryTarget: 'commonjs'
  }
	...
}

module

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/
        user: ['style-loader', 'css-loader']
      },
  		{
        test: /\.js$/,
  			// 排除node_modules下的js文件
  			exclude: /node_module/,
  			// 只检查src下的js文件
  			include: resolve(__dirname, 'src'),
        //优先执行
				enforce: 'pre',
        //延后执行
				// enforce: post
        // 单个loader用loader
        loader: 'eslint-loader',
        options: {}
      },
      {
        // 以下配置只会生效一个
        oneOf: []
      }
    ]
  }
}

resolve

module.exports = {
  ...
  // 解析模块的规则
  resolve: {
  	// 配置解析模块路径别名 
    // 优点:简写路径缺点路径没有提示
    alias:{
      $css: resolve(__dirname, 'src/css')
    },
    // 配置省略文件路径的后缀名
    extensions: ['.js', '.json', '.jsx'],
    // 告诉webpack解析模块是去找哪个目录
    modules: [reslove(__dirname, '../../node_modules'), 'node_modules']
  }
}

devServer

module.exports = {
  ...
  devServer: {
    // 运行代码的目录
		contentBase: resolve (__dirname, 'build'),
    // 监视contentBase 目录下的所有文件，一旦文件变化就会reload,重新打包
    watchContentBase: true,
    watchOptions:{
      //忽略文件
      ignored: / node_ modules/
    },
    // 启用gzip压缩
    compress: true,
    port: 5000,
    host: 'localhost',
    // 自动打开浏览器
    open: 'true',
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错了，不要全屏提示
    overlay: false,
    // 服务器代理--> 解决开发环境跨域问题
    proxy: {
      // 一旦devServer(5000)服务器接受到/api/xxx 的请求，就会把请求转发到另外一个服务器(3000). 
      '/api':{
				target: 'http://localhost:3000',
 				//发送请求时，请求路径重写:将/api/xxx --> /xxx (去掉/api)
        pathRewrite:{
        	'^/api': ''
        }
    }
  }
}

optimization

const TerserWebpackPlugin = require('terser -webpack-plugin' )

module.exports = {
  ...
  mode: 'production',
  optimization: {
    splitChunks: {
      chunks: 'all',
      //以下为默认值
      /*
      minSize: 30 * 1024, // 分割的chunk最小为30kb
      maxSize: 0, // 最大没有限制
      minChunks: 1, // 要提取的chunk至少被引用一次
      maxAsyncRequest: 5, //按需如载时并行加载的文件的最大数量
      maxInitialRequest: 3, //入口js.文件最大并行请求数量
      automaticNameDelimiter: '~', // 名称连接符
      name : true, //可以使用命名规则
      cacheGroups: { // 分割chunk的组
        // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
        //满足上面的公共规则，如:大小超过30kb， 至少被引用一次。
        vendors:{
          test: /[\\/ ]node_ modules[\\/]/,
          // 打包优先级为-10
          priority: -10
        },
        default: {
          //要提取的chunk最少被引用2次
          minChunks: 2,
          //优先级
          priority: -20,
          //如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
          reuseExistingChunk: true
        }
      }
      */
    },
    // 将当前模块的记录其他模块的hash单独打包为一一个文件runtime
    // 解决: 修改a文件导致b文件的contenthash变化，并且发生重新打包的现象
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    }，
    minimizer:[
      //配置生产环境的压缩方案: js和css
      new TerserWebpackPlugin({
				//开启缓存
				cache: true,
				//开启多进程打包
    		parallel: true,
    		//启动source-map
    		sourceMap: true
      })
  ]
}