webpack生产环境下的配置

css 处理

css提取

  1. 下载包

npm i -D mini-css-extract-plugin

  1. 配置

    module: {
    rules: [
    {
    test: /.css$/,
    use: [
    // 'style-loader', // 创建style标签,将样式加入js文件
    MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件
    'css-loader',
    ]
    },
    ]
    },
    plugins: [
    new HtmlWebpackPlugin({
    template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
    filename: 'css/budle.css'
    })
    ],

css兼容性处理

  1. 下载包

npm i -D postcss-loader postcss-preset-env

  1. 配置

Webpack.config.js

复制代码
 rules: [
   {
     test: /\.css$/,
     use: [
       // 'style-loader', // 创建style标签,将样式加入js文件
       MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件
       'css-loader',
       // css兼容性处理:postcss ---> postcss-loader  postcss-preset-env
       // 帮postcss找到package.json中的browerslist里面的配置,通过配置加载指定的css兼容性样式
       /**
                 * "browserslist": {
                 *   // 开发环境 --> 设置node环境变量: process.env.NODE_ENV = development 才能生效
                    "development": [
                    "last 1 chrome version",
                    "last 2 firefox version",
                    "last 1 safari version"
                    ],
                    // 生产环境:默认看生产环境
                    "production":[
                    "> 0.2%",
                    "not dead",
                    "not op_mini all"
                    ]
                }
                 */
       {
         loader: 'postcss-loader',
         options: {
           postcssOptions: {
             plugins:  [
               'postcss-preset-env'
             ]
           },
         }
       }
     ]
   }, 
 ]

package.json

复制代码
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 2 firefox version",
      "last 1 safari version"
    ],
    "production": [
      "> 0.1%",
      "not dead",
      "not op_mini all"
    ]
  }

压缩css

  1. 下载包

npm i css-minimizer-webpack-plugin -D

复制代码
 plugins: [
  // 压缩css
  new CssMinimizerWebpackPlugin()
],

js压缩

  1. mode设置为生产模式即可,生产环境自动压缩js

mode: "production"

html压缩

复制代码
plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    minify: {
      // 移除空格
      collapseWhitespace: true,
      // 移除注释
      removeComments: true,
    }
  }),
]

eslint

  1. 下载包

npm i -D eslint eslint-webpack-plugin eslint-plugin-import eslint-config-airbnb-base

  1. 配置

Webpack.config.js

复制代码
 plugins: [
   new ESLintWebpackPlugin({
     exclude: '/node_modules/',
     fix: true,
   })
 ],

Package.json

根配置,配置eslint标准

复制代码
"eslintConfig": {
  "extends": "airbnb-base"
}

js兼容

  1. 下载包

npm i -D babel-loader @babel/preset-env @babel/core @babel/polyfill core-js

  1. 配置

    module: {
    rules: [
    {
    // 1. js兼容性处理: babel-loader @babel/core @babel/preset-env
    // 问题:babel只能转换基础的语法,如promise则不能进行转换
    // 2. 全部兼容 @babel/polyfill
    // 问题:可以解决兼容性问题,但是引入了所有的兼容性代码,体积太大
    // 3. 需要做兼容性的处理就ok,按需加载---> core-js
    test: /.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
    // 预设: 指示babel做怎样的兼容性处理
    presets: [[
    '@babel/preset-env',
    {
    useBuiltIns: 'usage', //按需加载
    corejs: {
    version: 3, // 指定core-js版本
    },
    targets: { // 指定兼容浏览器版本
    chrome: '60',
    firefox: '60',
    ie: '9',
    safari: '10',
    edge: '17'
    }
    }
    ]]
    }
    }
    ]
    }

在入口文件(src/index.js)引入@babel/polyfill

import '@babel/polyfill';

方案2和方案三选一种即可

方案2

复制代码
module: {
  rules: [
      {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: {
         // 预设: 指示babel做怎样的兼容性处理
         presets: [[
           '@babel/preset-env',
         ]]
       }
     }
  ]
}

在入口文件引入 @babel/polyfill

import '@babel/polyfill';

方案3

复制代码
module: {
  rules: [
     {
       //  1. js兼容性处理: babel-loader @babel/core  @babel/preset-env
       //  问题:babel只能转换基础的语法,如promise则不能进行转换
       //  2. 全部兼容  @babel/polyfill
       //  问题:可以解决兼容性问题,但是引入了所有的兼容性代码,体积太大
       //  3. 需要做兼容性的处理就ok,按需加载---> core-js
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: {
         // 预设: 指示babel做怎样的兼容性处理
         presets: [[
           '@babel/preset-env',
           {
             useBuiltIns: 'usage', //按需加载
             corejs: {
               version: 3, // 指定core-js版本
             },
             targets: {  // 指定兼容浏览器版本
               chrome: '60',
               firefox: '60',
               ie: '9',
               safari: '10',
               edge: '17'
             }
           }
         ]]
       }
     }
  ]
}
相关推荐
耶啵奶膘2 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机6 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui