前端-webpack生产环境基本配置

其他 2021-03-06 10:48:24 阅读次数: 0

提取 css 成单独文件

  1. 下载 plugin

    npm i mini-css-extract-plugin -D

  2. 修改配置文件

    const {
      
       resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
      
      
    entry: './src/js/index.js',
    output: {
      
      
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
      
      
        rules: [
            {
      
      
                test: /\.css$/,
                use: [
                    // 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件
                    MiniCssExtractPlugin.loader,
                    // 将 css 文件整合到 js 文件中
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
      
      
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
      
      
            // 对输出的css文件进行重命名
            filename: 'css/built.css'
        })
    ],
    mode: 'development'
};

  3. 运行指令：webpack

css 兼容性处理

  1. 下载 loader

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

  2. 修改配置文件

    const {
      
       resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

module.exports = {
      
      
    entry: './src/js/index.js',
    output: {
      
      
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
      
      
        rules: [
        {
      
      
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                // 修改 loader 的配置
                {
      
      
                    loader: 'postcss-loader',
                    options: {
      
      
                        ident: 'postcss',
                        plugins: () => [
                            // postcss 的插件
                            require('postcss-preset-env')()
                        ]
                    }
                }
            ]
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
      
      
        template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
      
      
        filename: 'css/built.css'
        })
    ],
    mode: 'development'
};

  3. 修改 package.json，添加如下配置

    "browserslist": {
      
      
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ],
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ]
}

  4. 运行指令：webpack

压缩 css

  1. 下载 plugin

    npm i optimize-css-assets-webpack-plugin -D

  2. 修改配置文件

    const {
      
       resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

module.exports = {
      
      
    entry: './src/js/index.js',
    output: {
      
      
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
      
      
        rules: [
        {
      
      
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
      
      
                    loader: 'postcss-loader',
                    options: {
      
      
                        ident: 'postcss',
                        plugins: () => [
                            // postcss的插件
                            require('postcss-preset-env')()
                        ]
                    }
                }
            ]
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
      
      
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
      
      
            filename: 'css/built.css'
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development'
};

  3. 运行指令：webpack

js 语法检查

  1. 下载安装包

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

  2. 修改配置文件

    const {
      
       resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
      
      
    entry: './src/js/index.js',
    output: {
      
      
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
      
      
        rules: [
        {
      
      
            test: /\.js$/,
            // 注意：只检查自己写的源代码，第三方的库是不用检查的
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: {
      
      
                // 自动修复 eslint 的错误
                fix: true
            }
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
      
      
            template: './src/index.html'
        })
    ],
    mode: 'development'
};

  3. 配置 package.json

    "eslintConfig": {
      
      
    "extends": "airbnb-base"
}

  4. 运行指令：webpack

js 兼容性处理

  1. 下载安装包

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

  2. 修改配置文件

    const {
      
       resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
      
      
    entry: './src/js/index.js',
    output: {
      
      
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
      
      
        rules: [
        /*
            js兼容性处理：babel-loader @babel/core 
            1. 基本js兼容性处理 --> @babel/preset-env
                问题：只能转换基本语法，如promise高级语法不能转换
            2. 全部js兼容性处理 --> @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'
                        }
                    }
                ]
            ]
            }
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
      
      
            template: './src/index.html'
        })
    ],
    mode: 'development'
};

  3. 运行指令：webpack

js 压缩

生产环境会自动压缩 js 代码。所以只需更改 mode 为 production 即可。如下

const {
    
     resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    
    
  entry: './src/js/index.js',
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html'
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'
};

运行指令：webpack

HTML 压缩

  1. 修改配置文件

    const {
      
       resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
      
      
    entry: './src/js/index.js',
    output: {
      
      
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
      
      
            template: './src/index.html',
            // 压缩html代码
            minify: {
      
      
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        })
    ],
    mode: 'production'
};

  2. 运行指令：webpack

生产环境配置汇总

const {
    
     resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    
    
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
    
    
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
    
    
  entry: './src/js/index.js',
  output: {
    
    
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
    
    
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      /*
        正常来讲，一个文件只能被一个loader处理。
        当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
          先执行eslint 在执行babel
      */
      {
    
    
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
    
    
          fix: true
        }
      },
      {
    
    
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
    
    
          presets: [
            [
              '@babel/preset-env',
              {
    
    
                useBuiltIns: 'usage',
                corejs: {
    
    version: 3},
                targets: {
    
    
                  chrome: '60',
                  firefox: '50'
                }
              }
            ]
          ]
        }
      },
      {
    
    
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {
    
    
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
          esModule: false
        }
      },
      {
    
    
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
    
    
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
    
    
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
    
    
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
    
    
      template: './src/index.html',
      minify: {
    
    
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

相关文章

如果您觉得这篇文章对您有帮助，欢迎为我的 github项目 点一个⭐

猜你喜欢

转载自blog.csdn.net/Apple_Coco/article/details/107075549
今日推荐
周排行
Android图片与下拉框
java常用的设计模式之单例模式
zabbix自动化监控之自动注册
杨老师课堂之Excel VBA 程序开发第八讲使用工作表函数
Android 去掉底部虚拟导航栏
Android Studio 3.2 Beta 4 发布，功能改进和修复
Linux-3.5_总线驱动设备
Qt QTableView QStandardItemModel用法
session处理
分享几个实用的方法
每日归档
更多
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022