webpack.config.js

  2. const{resolve} = require('path')
  3. const MiniCssExtractPlugin =require('mini-css-extract-plugin')
  4. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
  5. const HtmlWebpackPlugin = require('html-webpack-plugin');
  8. //定义nodejs环境变量：决定使用browserslist的哪个环境
  9. process.env.NODE_ENV = 'production'
  11. //复用loader
  12. const commonCssLoader = [
  13.     MiniCssExtractPlugin.loader,
  14.     'css-loader',
  15.     {
  16.         //还需要在package.json中定义browserslist
  17.         loader:'postcss-loader',
  18.         options:{
  19.             ident:'postcss',
  20.             plugins:()=>[
  21.                 require('postcss-preset-env')()
  22.             ]
  23.         }
  24.     }
  25. ]
  27. module.exports = {
  28.     entry:'./src/js/index.js',
  29.     output:{
  30.         filename:'js/built.js',
  31.         path:resolve(__dirname,'build')
  32.     },
  33.     module:{
  34.         rules:[
  35.             {
  36.                 test:/\.css$/,
  37.                 use:[...commonCssLoader]
  38.             },
  39.             {
  40.                 test:/\.less$/,
  41.                 use:[ ...commonCssLoader,'less-loader']
  42.             },
  43.             /**
  44.              * 正常来讲，一个文件只能被一个loader处理
  45.              * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
  46.              * 先执行eslint 再执行babel
  47.              */
  48.             {
  49.                 //在package.json中eslintConfig --> airbnb
  50.                 test:/\.js$/,
  51.                 exclude:/node_modules/,
  52.                 //优先执行
  53.                 enforce:'pre',
  54.                 loader:'eslint-loader',
  55.                 options:{
  56.                     fix:true
  57.                 }
  58.             },
  59.             {
  60.                 test:/\.js$/,
  61.                 exclude:/node_modules/,
  62.                 loader:'babel-loader',
  63.                 options:{
  64.                     preset:[
  65.                         [
  66.                             '@babel/preset-env',
  67.                             {
  68.                                  //按需加载
  69.                                 useBuiltIns:'usage',
  70.                                 //指定core-js版本
  71.                                 corejs:{
  72.                                     version:3
  73.                                 },
  74.                                 targets:{
  75.                                     chrome:'60',
  76.                                     firefox:'60',
  77.                                     ie:'9',
  78.                                     safari:'10',
  79.                                     edge:'17'
  80.                                 }
  81.                             }
  82.                         ]
  84.                     ]
  85.                 }
  86.             },
  87.             {
  88.                 test:/\.(jpg|png|gif)/,
  89.                 loader:'url-loader',
  90.                 options:{
  91.                     limit:8*1024,
  92.                     name:'[hash:10].[ext]',
  93.                     outputPath:'../imgs',
  94.                     esModule:false
  95.                 }
  96.             },
  97.             {
  98.                 test:/\.html$/,
  99.                 loader:'html-loader'
  100.             },
  101.             {
  102.                 exclude:/\.(js|css|less|html|jpg|png|gif)/,
  103.                 loader:'file-loader',
  104.                 options:{
  105.                     outputPath:'media'
  106.                 }
  107.             }
  109.         ]
  110.     },
  111.     plugins:[
  112.         new MiniCssExtractPlugin({
  113.             filename:'css/built.css'
  114.         }),
  115.         new OptimizeCssAssetsWebpackPlugin(),
  116.         new HtmlWebpackPlugin({
  117.             template:'./src/index.html',
  118.             minify:{
  119.                 collapseWhitespace:true,
  120.                 removeComments:true
  121.             }
  122.         })
  123.     ],
  124.     mode:'production'
  125. }

package.json

  1. "browserslist": {
  2.     "development": [
  3.       "last 1 chrome version",
  4.       "last 1 firefox version",
  5.       "last 1 safari version"
  6.     ],
  7.     "production": [
  8.       ">0.01%",
  9.       "not dead",
  10.       "not op_mini all"
  11.     ]
  12.   },
  13.   "eslintConfig": {
  14.     "extends": "airbnb-base"
  15.   }