生产环境-production

开发环境里面的css打包文件和js在一个文件里面，会导致js文件太大，需要下一个插件，plugin mini-css-extract-plugin抽取css文件出来，loader能做的事情比较少，兼容性处理一般用loader，压缩用plugin，

optimize-css-assets-webpack-plugin是一个用来压缩css的插件 抽取css文件： use: [           // 创建style标签，将样式放入           // 'style-loader',            // 这个loader取代style-loader。作用：提取js中的css成单独文件           MiniCssExtractPlugin.loader,           // 将css文件整合到js文件中           'css-loader'         ] new MiniCssExtractPlugin({       // 对输出的css文件进行重命名       filename: 'css/built.css'     }) css兼容性处理：(less也能使用 // 'postcss-loader',顺序less->postcss-loader的配置->css-loader-> MiniCssExtractPlugin.loader(从js中抽取css))   css兼容性处理：postcss --> postcss-loader（保证能在webpack中使用） postcss-preset-env，（保证postcss识别到某一个环境，加载指定的配置，精确到某一个浏览器的版本，   帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式 ）  // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development，不设置默认使用生产环境的配置，              "browserslist": {//各种浏览器的配置     "development": [       "last 1 chrome version",       "last 1 firefox version",       "last 1 safari version"     ],     "production": [       ">0.2%",       "not dead",       "not op_mini all"     ]   },  // 使用loader的默认配置           // 'postcss-loader',           // 修改loader的配置（可以直接像上面那样写，写成一个对象是为了可以修改loader配置）           {             loader: 'postcss-loader',             options: {//用来修改默认配置               ident: 'postcss',               plugins: () => [                 // postcss的插件                 require('postcss-preset-env')()               ]             }           } js语法检查： 团队工作的时候写的代码风格一致  /*         语法检查： eslint-loader  eslint//要用到的依赖           注意：只检查自己写的源代码，第三方的库是不用检查的           设置检查规则：             package.json中eslintConfig中设置~               "eslintConfig": {                 "extends": "airbnb-base"               }             airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint为了能使用airbnb规则安装的依赖       */       {         test: /\.js$/,//检查的文件只有js文件         exclude: /node_modules/,//排除node_modules         loader: 'eslint-loader',         options: {           // 自动修复eslint的错误           fix: true         }       } js兼容性处理： IE浏览器不认识es6新增语法  /* 将es6以上的语法转换成es5         js兼容性处理：babel-loader @babel/core //要下载的包           1. 基本js兼容性处理 --> @babel/preset-env             问题：只能转换基本语法，如promise高级语法不能转换           2. 全部js兼容性处理 --> @babel/polyfill  //下载以后直接引入就可以使用，在js文件中import引入// import '@babel/polyfill';             问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~           3. 需要做兼容性处理的就做：按需加载  --> core-js//下载配置       */         {         test: /\.js$/,         exclude: /node_modules/,         loader: 'babel-loader',         options: {           // 预设：指示babel做怎么样的兼容性处理           presets: [             [               '@babel/preset-env',               {                 // 按需加载                 useBuiltIns: 'usage',                 // 指定core-js版本                 corejs: {                   version: 3                 },                 // 指定兼容性做到哪个版本浏览器                 targets: {                   chrome: '60',                   firefox: '60',                   ie: '9',                   safari: '10',                   edge: '17'                 }               }             ]           ]         }       } js和html压缩：js压缩，只需要将mode的值改成production，就能实现自动压缩，生产环境下会自动压缩代码，因为他会自动加载一个插件UglifyJsPlugin html压缩：（js和css都做了兼容性处理，html不需要） new HtmlWebpackPlugin({       template: './src/index.html',       // 压缩html代码       minify: {         // 移除空格         collapseWhitespace: true,         // 移除注释         removeComments: true       }     }) //可以进行代码复用use里面是一个数组，less，sass，css可以用同一个兼容性配置  /*         正常来讲，一个文件只能被一个loader处理。         当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：           先执行eslint 在执行babel，不然babel将es6语法转换成es5，eslint会报错       */ // 定义nodejs环境变量：决定使用browserslist的哪个环境//package.json里面有两种配置生产环境和开发环境