生产环境 webpack 配置

Posted 2020-12-09 shanlu

 

  1  
  2 
  3 const {resolve} = require(‘path‘)
  4 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)
  5 const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘)
  6 const htmlWebpackPlugin = require(‘html-webpack-plugin‘)
  7 
  8 process.env.NODE_ENV = ‘production‘
  9 
 10 //复用loader
 11 const commonCssLoader = [
 12     MiniCssExtractPlugin.loader,
 13     ‘css-loader‘,
 14     {
 15         loader:‘postcss-loader‘,
 16         options:{
 17             ident:‘postcss‘,
 18             plugins:()=>[require(‘postcss-preset-env‘)()]
 19         }
 20     }
 21 ]
 22 
 23 module.exports={
 24     entry:‘./src/index.js‘,
 25     output:{
 26         filename:‘bundle.js‘,
 27         path:resolve(__dirname,‘build‘)
 28     },
 29     module:{
 30         rules:[
 31             {
 32                 test:/.css$/,
 33                 use:[...commonCssLoader]
 34             },
 35             {
 36                 test:/.less$/,
 37                 use:[...commonCssLoader]
 38             },
 39             {
 40                 test:/.js$/,
 41                 exclude:/node_modules/,
 42                 enforce:‘pre‘, //优先执行，正常的，一个文件只能被一个loader处理，当一个文件要被多个loader处理，一定要指定loader执行的先后顺序，先执行eslint再执行babel
 43                 loader:‘eslint-loader‘,
 44                 options:{
 45                     fix:true
 46                 }
 47             },
 48             {
 49                 test:/.js$/,
 50                 exclude:/node_modules/,
 51                 loader:‘babel-loader‘,
 52                 options:{
 53                     presets:[
 54                         [‘@babel/preset-env‘,{
 55                             useBuiltIns:‘usage‘,
 56                             corejs:{version:3},
 57                             targets:{
 58                                 chrome:‘60‘,
 59                                 firefox:‘50‘
 60                             }
 61                         }]
 62                     ]
 63                 }
 64             },
 65             {
 66                 test:/.(jpg|png|gif)$/,
 67                 loader:‘url-loader‘,
 68                 options:{
 69                     limit:8*1024,
 70                     name:‘[hash:10].[ext]‘,
 71                     outputPath:‘imgs‘,
 72                     esModule:false
 73                 }
 74             },
 75             {
 76                 test:/.html$/,
 77                 loader:‘html-loader‘
 78             },
 79             {
 80                 exclude:/.(js|css|less|html|jpg|png|gif)$/,
 81                 loader:‘file-loader‘,
 82                 options:{
 83                     outputPath:‘media‘
 84                 }
 85             }
 86         ]
 87     },
 88     plugins:[
 89         new MiniCssExtractPlugin({
 90             filename:‘bundle.css‘
 91         }),
 92         new OptimizeCssAssetsWebpackPlugin(),
 93         new HtmlWebpackPlugin({
 94             template:‘./src/index.html‘,
 95             minify:{
 96                 collapseWhitespace:true,
 97                 removeComments:true
 98             }
 99         })
100     ],
101     mode:‘production‘
102 }