登录
当前位置： 首页 > 工具软件 > webpack-core-usage > 使用案例 >

webpack入门3-----生产环境配置

姬昀
2023-12-01

下方的配置文件均为webpack.config.js文件

在配置完成后运行指令均为webpack，可查看打包产生的文件

项目内容上传到了  码云 https://gitee.com/a2547944268/webpack_test上，下面的内容对照着代码的话，可能更清晰。

1.提取css成单独文件

因为在一般情况下，js内引入的css文件，会被打包进出口js文件内，所以引入在编译的时候会到导致编译文件较大，速度慢的情况

所以将css单独打包出来，可以适当增加文件加载速度

需要下载插件

npm install --save-dev mini-css-extract-plugin

修改配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 这个插件的作用：提取css成单独文件进行使用
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: [
      // loader的配置
      // css文件是放置在js文件内的，不需要单独文件夹存放
      {
        // 处理css资源
        test: /\.css$/,
        use: [
          // 创建style标签，将样式放入
          // 'style-loader',

          // 取代style-loader，提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css整合到js文件中
          'css-loader',
        ],
      }
    ],
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css',
    }),
  ],
  mode: 'development',
};

其中，使用mini-css-extract-plugin达将css提取出来的目的。

2.css兼容性处理

处理css的兼容性问题，需要的是postcss-loader

安装文件

npm install --save-dev postcss-loader postcss-preset-env
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: [
      {
        // 处理css资源
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['postcss-preset-env'],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css',
    }),
  ],
};

同时还需要修改package.json文件

"browserslist": {
	// 开发环境  --》设置node环境变量：process.env.NODE_ENV = "development"
	"development": [
	"last 1 chrome version",
	"last 1 firefox version",
	"last 1 safari version"
	],
	// 生产环境
	"production": [
	">0.2%",
	"no dead",
	"not_op_mini all"
	]
}

运行指令：webpack

3.压缩css

压缩css文件，需要安装   optimize-css-assets-webpack-plugin

npm install --save-dev optimize-css-assets-webpack-plugin

配置

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');

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: {
              postcssOptions: {
                plugins: ['postcss-preset-env'],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css',
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin(),
  ],
  mode: 'development',
};

4.js语法检查

使用的是eslint'

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

配置

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: [
      // 需要安装 eslint-loader  eslint eslint-config-airbnb-base eslint-plugin-import
      /*
                语法检查： eslint-loader  eslint
                注意：只检查自己写的代码，第三方的库不进行检查
                设置检查规则：
                    package.json中eslintConfig中设置
                    airbnb --> eslint-config-airbnb-base eslint eslint-plugin-import
                    //airbnb 规则
            */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复exslint错误
          fix: true,
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

配置package.json

"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },

运行webpack，产生build文件即可。

5.js兼容性处理

安装babel-loader等

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

配置

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'),
    environment: {
      arrowFunction: false,
    },
  },
  module: {
    rules: [
      /*
            js兼容性处理:babel-loader
                需要下载三个包：babel-loader @babel/core  @babel/preset-env

                下面是解决方案：
                1.基本js兼容性处理 ---> @babel/preset-env
                   问题：只能转换基本语法，如promise不能转换

                2.全部js兼容性处理 ---> @babel/polyfill
                   需要下载：@babel/polyfill
                   下载完成后在源代码内引入即可 import  上述的三个东西不需要引入（可以将文件内的es6的东西全部转换）
                   问题：如果只需要解决部分兼容性问题，但是所有的兼容性代码全部引入，体积太大
                3.需要做兼容性处理的就做：按需加载 ---> core-js
                   需要下载：core-js

                注：在使用第三个方案的时候，不能同时使用第二种方案
            */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做怎样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载  第三种处理方式
                useBuiltIns: 'usage', // 使用视频内的东西报错，更换之后编译正常
                // useBuiltIns: 'entry',
                // 指定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',
};

6.js压缩

模式为生产环境下会自动压缩js代码

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'),
    environment: {
      arrowFunction: false,
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  // 生产环境下会自动压缩js代码
  // 因为生产环境会去加载UglifyJsPlugin插件
  mode: 'production',
};

7.html压缩

配置

直接在html-webpack-plugin插件内添加属性  minify  进行压缩配置

// html不需要做兼容性处理
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'),
    environment: {
      arrowFunction: false,
    },
  },
  plugins: [
    // 直接通过HtmlWebpackPlugin进行压缩
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      },
    }),
  ],
  mode: 'production',
};

生产环境配置汇总

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 = 'development';

// 复用loader
const commonCssLoader = [
  // 这种写法会将css代码直接整合到js内
  // 'style-loader',
  // 下面的写法是将编译后的css文件提取出来
  MiniCssExtractPlugin.loader, // 将css代码提取为单独css文件
  'css-loader', // 编译css代码
  {
    // css兼容性处理
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: ['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', // 将less编译成css
        ],
      },
      /*
              正常来讲，一个文件只能被一个loader处理
              当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：先执行eslint 再执行babel
              原因：eslint是检查语法错误的，而babel是将es6语法转换为es5语法，如果先使用了babel，在eslint内可能会报错
            */
      {
        // 需要在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: eslint - loader,
        options: {
          fix: true, // 自动修复js内的报错
        },
      },
      // js的压缩是：将mode设置为production会自动压缩
      {
        // js的兼容性处理
        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', // 输出路径
          esModules: 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',
    }),
    // 压缩css代码
    new OptimizeCssAssetsWebpackPlugin(),
    // 这个可以处理html里的代码，但是html内的图片无法处理
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),

  ],
  mode: 'production',
};

这些大体是生产环境需要配置的内容。

 类似资料：

相关阅读

详解用Webpack与Babel配置ES6开发环境IdentityServer4无法在生产环境中使用LINUX 生产环境搭建推荐教程MyBaits 入门之MyBatis环境搭建(第一篇)生产环境中安全运行Docker容器

相关文章

Netty环境安装配置Kafka环境安装配置MySQL配置环境变量Haskell开发环境配置OpenCV开发环境配置

相关问答

缺少生产环境的密钥库分离开发和生产Firebase环境根据环境（生产或测试）可选地加载配置文件缺少生产环境的secret_key_base，请在配置/secrets.yml中设置此值在生产环境中执行liquibase更新

相关文档

Flask 入门Ansible 入门ECMAScript 6 入门pyECO 中文翻译 - Python 开发生态环境简介Gulp 入门指南
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.