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

最新推荐文章于 2023-02-13 22:26:50 发布
最新推荐文章于 2023-02-13 22:26:50 发布
阅读量180 收藏 1
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a18792627168/article/details/118875670
版权

下方的配置文件均为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',
};

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

DOM曼珠沙华
关注
专栏目录
webpack配置
Heartbroken_man的博客
08-30 721
webpack搭建项目基础篇 一.创建项目 首先在终端cd到你的项目根目录，使用npm init创建package.json文件， 在你创建好的package.json文件里面的scripts字段那里新增这样一行，配置一下webpack执行的文件路径，同时创建一下webpack.config.js文件放在项目根目录下面 我们使用yarn add webpack webpack-cli安装一下webpack和webpack-cli两个依赖 （没有安装yarn的话可以使用npm或者cnpm，当然
webpack-bundle-analyzer 插件配置
m0_67390379的博客
06-18 1185
目录一、webpack-bundle-analyzer是什么？二、安装三、使用方法1. 作为插件使用2. 作为CLI的一个工具webpack-bundle-analyzer是webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件可以读取输出文件夹（通常是dist）中的stats.json文件，把该文件可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件后的大小、模块包含关系、依赖项等，对应做出优化，从而帮助提升代码质量和网站性能。
前端自动化构建工具：Webpack（三）—— Webpack 生产环境的基本配置
前端工程师
03-07 448
三 webpack 生产环境的基本配置 上一篇文章我们讲完了 webpack 开发环境的配置，接下来就该讲 webpack 生产环境的配置了。前面已经说到，开发环境是启用代码本地调试运行的环境，帮助我们更高效率的开发。而生产环境则需要启动能让代码优化上线运行的环境，我们需要进行一系列的优化操作，以达到更好的用户体验。 3.1 将CSS抽离成单独的文件 之前我们处理 css 资源，最终都是使用 style-loader 在 js 文件中去动态创建 style 标签，再把样式写入 style 标签里。这样
webpack之生产环境配置
weixin_50238437的博客
09-20 502
webpack之生产环境配置
webpack5 babel箭头函数不转普通函数
最新发布
weixin_58379637的博客
02-13 516
学习webpack5发现 babel的智能预设无法将箭头函数转换为普通函数， 这时候需要在webpack.config.js 中。这时候 再打包，箭头函数就会转换为普通函数。output 中加入配置。
ES6学习——新的语法：Arrow Functions
Challenge Next Challenge
01-04 2848
Arrow Functions并不是什么新鲜玩意了，在Java 8和Apple Swift语言中也都有这种写法，只不过有的语言用单箭头（->），JS中用双箭头（=>），大同小异，单箭头更像C或者C++中的指针语法。ES6中描述Arrow Functions的章节在14.2，有兴趣的可以自己去看。 下面先看个简单的例子，然后在介绍其他特征： let arr = [1, 2, 3]; le
webpack-starter-basic:一个简单的webpack入门项目
05-19
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它的核心理念是将应用程序分解为小块（称为...通过这个简单的入门项目，你可以逐步掌握 Webpack 的核心概念和配置，为进一步的前端学习打下坚实的基础。
webpack学习--webpack经典7分钟入门教程
08-30
在全局环境中安装Webpack的命令是`npm install webpack -g`，如果要在项目内部使用，可以执行`npm install webpack --save-dev`，这样Webpack会被添加到项目的devDependencies中。安装时要注意选择稳定的Webpack版本...
webpack-quick-start:Webpack快速入门
05-02
创建名为 `webpack.config.js` 的配置文件，这是 Webpack 执行时查找的默认配置文件。配置文件的基本结构如下： ```javascript module.exports = { entry: './src/index.js', // 入口文件 output: { // 输出设置 ...
webpack4.0-打包输出告诉webpack不使用箭头函数 environment(webpack环境配置)
memedadexixaofeifei的博客
01-20 1729
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { mode:'production', entry: { main:'./src/index.tsx' }, output:{.
webpack配置eslint检查
mhbsoft的博客
06-29 858
webpack.config.js const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/build.js', path: resolve(__dirname, 'build') }
nginx面向生产环境的配置原则
龙cc的博客
07-20 1026
1、任何环境在应用nginx新的配置文件前一定先configtest 2、不允许restart（stop---->start）这过程会停服，生产绝对禁止停服！ 3、正确姿势reload前先configtest configtest：确保配置文件正确，并不会给进程发任何信号 reload：master发起（SIGHUP）信号通知work，work会先处理所有未完成的请求，新的请求master放...
webpack中的process.env.NODE_ENV
轻风细雨_林木木
04-14 3787
1.什么是process? process是node的全局变量，这个变量有一个env属性。创建一个js文件index.js，打印process变量console.log(process)，使用node环境运行： node index.js 可以看到 2.process.env.NODE_ENV 是什么？ 1.这个变量不是process.env本来就有的，是通过设置得到的； 2.通过这个变量可以判断我们环境是开发环境还是生成环境。 3.配置process.env.NODE_ENV （1）webpack4
typescript的webpack配置
weixin_50736511的博客
10-05 291
TypeScript打包 webpack整合 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包； TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS； 步骤如下： 初始化项目 进入项目根目录，执行命令 npm init -y，创建package.json文件 下载构建工具 命令如下： npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plug
TS项目（贪吃蛇）
weixin_50236973的博客
09-06 440
TS项目（贪吃蛇）
webpack --env.production和--mode =“ production”有什么区别
九段刀客的博客
10-04 3114
在webpack.config.js中判断环境的时候要使用函数的方式导出， "scripts": { "serve": "webpack-dev-server --mode development --progress --open", "build": "webpack --env.production --mode production --progress" }, module.exports = function (env, argv) { console.log(env, argv)
webpack5的基本使用和深入优化
shuoz的博客
10-05 1554
asasas asass\ sdaskd'asd asd;la'sd asdlaskda sd
vue-cli中webpack配置详解：入门与新版本对比
本文将深入解析vue-cli v2.8.1版本中的webpack配置，特别关注于开发和生产环境的配置细节。对于初学者和有一定经验的vue开发者来说，vue-cli提供了一套便捷的脚手架工具，但其背后的webpack配置可能并不完全透明。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值