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'
             }
           }
         ]]
       }
     }
  ]
}
相关推荐
灵感__idea14 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript