webpack生产环境的基本配置

最新推荐文章于 2024-05-15 03:51:52 发布
最新推荐文章于 2024-05-15 03:51:52 发布
阅读量506 收藏 1
点赞数 1
分类专栏： # webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43652492/article/details/110744673
版权

文章目录

一、提取css成单独文件

1、创建文件

在这里插入图片描述
a.css文件：

#box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

b.css文件：

#box2 {
  width: 200px;
  height: 200px;
  background-color: deeppink;
}

index.js文件：

import '../css/a.css';
import '../css/b.css';

index.html文件：

<div id="box1"></div>
<div id="box2"></div>
2、下载 mini-css-extract-plugin（和上一篇博客一样，我们装在外面）
npm install --save-dev mini-css-extract-plugin
3、修改配置文件
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: [
          
          // 'style-loader', // 创建style标签，将样式放入         
          MiniCssExtractPlugin.loader,// 这个loader取代style-loader。作用：提取js中的css成单独文件
          // 将css文件整合到js文件中
          'css-loader'

        ]
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),

    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],

  mode: 'development'
};
4、运行指令：webpack
webpack

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、css兼容性处理

css兼容性处理：postcss --> postcss-loader postcss-preset-env

postcss-preset-env插件的作用是：
帮 postcss 找到 package.json 中 browserslist 里面的配置，通过配置加载指定的css兼容性样式

1、创建文件

除了 a.css文件需要修改，其他的上一节文件即可：

a.css文件：

#box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
  display: flex;
  backface-visibility: hidden;
}
2、下载loader和 postcss-preset-env 插件
npm install --save-dev postcss-loader postcss-preset-env
3、修改配置文件

视频中 webpack4 是这样做的，加入下述代码：

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: () => [
      // postcss的插件
      require('postcss-preset-env')()
    ]
  }
}

如下图所示：

在这里插入图片描述
但是 webpack5 这样写会报错。webpack5的可以这样做：

  • 新建 postcss.config.js 文件，写入下述代码：
module.exports = {
    plugins: [
        // postcss的插件
        require('postcss-preset-env')
      ]
}
  • 在 webpack.config.js 中 使用loader的默认配置：
'postcss-loader',

如下图所示：
在这里插入图片描述

4、修改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"
  ]
},

其中 “last 1 chrome version” 代表 兼容最近的一个 chrome 版本；
“>0.2%” 代表 大于99.8%的浏览器；
"not dead"代表不要已经死了的浏览器
在这里插入图片描述

  • development 开发环境
  • production 生产环境，默认是生产环境，与 mode: ‘development’ 没关系。
  • 怎么变成开发环境？
    • 设置node环境变量：process.env.NODE_ENV = development
5、运行
（1）开发环境下：

在 webpack.config.js 文件中加入下面代码，如下图所示：

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

在这里插入图片描述
运行指令：webpack

webpack

在这里插入图片描述
在这里插入图片描述

（2）生产环境下：
  • 将 process.env.NODE_ENV = ‘development’; 注释掉，如下图所示：
    在这里插入图片描述
  • 再进行 webpack 打包
    在这里插入图片描述
    我们可以看到 display: flex; 在生产环境下是不生效的，但是如果我们把package.json改成 >0.01% 就能看到变化了：
    在这里插入图片描述
    在这里插入图片描述

三、压缩css

1、创建文件（用上一节的文件即可）
2、下载安装包
npm install --save-dev optimize-css-assets-webpack-plugin
3、修改配置文件

加入以下代码：

const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

//压缩css
new optimizeCssAssetsWebpackPlugin()

如下图所示：
在这里插入图片描述

在这里插入图片描述

4、运行指令：webpack
webpack

在这里插入图片描述

四、js语法检查

1、创建文件

在这里插入图片描述
index.js文件：

function add(x, y) {
  return x + y;
}
console.log(add(2, 5));

index.html文件：

<h1>hello webpack</h1>
2、下载安装包
  • 语法检查： eslint-loader eslint
    • 注意：只检查自己写的源代码，第三方的库是不用检查的
    • 设置检查规则：package.json中eslintConfig中设置~
      “eslintConfig”: {
      “extends”: “airbnb-base”
      }
    • airbnb 需要–> eslint-config-airbnb-base eslint-plugin-import eslint
npm install --save-dev eslint-loader eslint eslint-config-airbnb-baseeslint-plugin-import
3、修改配置文件
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'
};

也就是新增了下述代码：
在这里插入图片描述

4、配置package.json
"eslintConfig":{
  "extends":"airbnb-base",
  "env":{
    "browser":true
  }
},

如下图所示：
在这里插入图片描述

5、运行指令：webpack
webpack

上线时 console.log(add(2, 5));这种代码最好不要写，但是如果是调试阶段，可以用eslint-disable-next-line忽略它，不进行eslint检查，如下图所示：
在这里插入图片描述

五、js兼容性处理

1、创建文件

在这里插入图片描述
index.js文件：

const add = (x, y) => {
  return x + y;
};
console.log(add(2, 5));

const promise = new Promise(resolve => {
  setTimeout(() => {
    console.log('定时器执行完了~');
    resolve();
  }, 1000);
});

console.log(promise);

index.html文件：

<h1>hello webpack</h1>
2、在package.json所在文件夹下 下载安装

这里我将下面会提到的所有需要下载的都下载了

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
3、修改配置文件
（1） 基本js兼容性处理 --> @babel/preset-env

问题：只能转换基本语法，如promise高级语法不能转换
在这里插入图片描述

（2） 全部js兼容性处理 --> @babel/polyfill

问题：如果只想解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~

只需在需处理的js中引入即可，如下图所示：
在这里插入图片描述
在这里插入图片描述

（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'
          }
        }
      ]
    ]
  }
}

在这里插入图片描述
注意：当使用第三种方式时，不能同时使用第二种，要将js中引入的第二种方式代码注释掉。如下图所示：
在这里插入图片描述

4、运行指令：webpack

这里我用的第三种按需加载方式：

webpack

在这里插入图片描述
在实际中一般不用第二种方式，一般用第一种和第二种结合的方式。

六、js压缩

生产环境下会自动压缩js代码，所以只需要将 mode 改为 production 即可

mode: 'production'

七、html压缩

视频里是写了下述代码实现了html压缩，但是webpack5已经可以像上述所示自己压缩了
在这里插入图片描述

八、生产环境配置

将上述整理在一起，即以下代码：

webpack.config.js代码：

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 = [

  // 这个loader取代sty7le-loader。作用：提取js中的css成单独文件
  MiniCssExtractPlugin.loader,

  // 将css文件整合到js文件中
  'css-loader',

  //css兼容性处理  还需要在package.json中定义browserslist
  // 使用loader的默认配置 
  'postcss-loader',  
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
    publicPath:'./'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },

      /*
        正常来讲，一个文件只能被一个loader处理。
        当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
          先执行eslint 在执行babel
      */

      //JS语法检查
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      },

      //JS兼容性处理
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                corejs: {
                  // 指定core-js版本
                  version: 3
                },
                targets: {
                  // 指定兼容性做到哪个版本浏览器
                  chrome: '60',
                  firefox: '50'
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [

    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css' 
    }),

    //压缩css
    new OptimizeCssAssetsWebpackPlugin(),
    
    new HtmlWebpackPlugin({
      template: './src/index.html'     
    })
  ],

  // 生产环境下会自动压缩js html 代码
  mode: 'production'
};

package.json新增代码：

"browserslist": {
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
  "production": [
    ">0.01%",
    "not dead",
    "not op_mini all"
  ]
},
"eslintConfig": {
  "extends": "airbnb-base",
  "env": {
    "browser": true
  }
},

postcss.config.js代码：

module.exports = {
    plugins: [
        // postcss的插件
        require('postcss-preset-env')
      ]
}
小R.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack开发环境和生产环境的深入理解
01-19
以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享...
webpack+typescript环境配置.zip
04-23
接下来，我们将深入探讨如何配置一个基于 Webpack 和 TypeScript 的开发环境，以及如何进行项目结构搭建和打包发布。 1. **安装依赖** 在创建新项目之前，首先确保已安装 Node.js。然后通过 `npm`（Node Package ...
webpack基本使用和开发环境配置
weixin_51249285的博客
03-02 1013
webpack基本使用和开发环境配置
Webpack--生产环境配置
xuan的博客
05-08 1218
一、环境配置的封装 （1）使用相同的配置文件，在构建开始前将当前所属环境作为一个变量传递进去，在webpack.config.js中通过各种判断条件决定具体使用哪个配置。 //package.json { 'script': { 'dev': "ENV=development webpack-dev-server", 'build': 'ENV=production webpack' } } //webpack.config.js const ENV = process.env
2024年最新Webpack配置详解——这一篇就够用了，21年前端面试题
最新发布
2401_84616838的博客
05-15 630
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】Mode：模式，有生产模式production和开发模式development理解LoaderWebpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载Loader 本身也是运行在 node.js 环境中的 JavaScript 模块。
webpack生产环境配置
weixin_51249285的博客
03-02 564
webpack生产环境配置
从0到1手动配置Webpack（webpack基本配置）
qq_43955202的博客
10-02 686
1.认识webpack（grunt/gulp的区别和联系） webpack是一个现代的javascript应用的静态模块打包工具。 webpack的功能：代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布 webpack中前端模块化介绍 前端模块化方案： AMD, CMD,CommonJS, ES6. 项目通过模块化开发完成了之后，还需要处理模块间的各种依赖，并且将其进行整合打包。 webpack其中的一个核心就是让我们进行模块化开发，并且会帮助我们处理模块间的依赖关系。 而且不仅仅是
4. webpack 生产环境的基本配置
小丕的博客
03-13 1540
第 4 章：webpack 生产环境的基本配置 开发环境： 源代码 -> webpack+自动化 -> bundle 开发环境中：比如 1. css -> loader -> js ； css经过loader加载会加入到js代码中；会使js代码体积变大；由于先加载js后再插入style标签，会存在闪现现象； .... 生产环境中： 以下操作放在开发环境的话会拖慢开发环境的构建速度，即打包速度较慢，影响开发效率； 4.1 提取 css 成单独文件 1. 下载安装包 2
React + webpack 环境配置的方法步骤
08-29
React + Webpack 环境配置方法步骤 React 是一个流行的前端框架，用于构建用户界面，而 Webpack 是一个流行的模块打包工具，用于管理和编译 ...通过这些配置，可以快速构建一个完整的前端环境，用于开发和生产环境。
webpack基本配置案例
08-10
Webpack 是一个流行的JavaScript模块打包工具，它将现代前端开发中的各种资源（如JavaScript、CSS、图片等）进行处理和组织，生成优化过的静态资源，便于部署到生产环境。在这个"webpack基本配置案例"中，我们将深入...
webpack项目开发配置1
08-04
* webpack.pub.config.js：生产环境配置文件 这些文件将在后面的文章中详细介绍。 本篇文章介绍了如何配置 Webpack 项目开发环境，包括安装 Node.js、创建项目、安装 Webpack、创建 Webpack 配置文件等步骤。这些...
浅谈Webpack下多环境配置的思路
08-27
主要介绍了浅谈Webpack下多环境配置的思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack 环境配置和基本用法
qianduan2001_5的博客
05-25 100
(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中。
webpack配置开发环境和生产环境
u014179832的博客
09-06 799
       因为使用场景的不同，我们在搭建环境时常常需要分为开发环境和生产环境。有以下几种方式可以实现，每种使用场景各不同，可根据实际情况使用。 1. 通过cross-env在命令行中声明。 2. 通过process.env.NODE_ENV在配置入口文件声明。 process.env.NODE_ENV = 'production' 3. 通过webpack.defineplugin插...
【webpack4】第四部分 生产环境基本配置
Trees__的博客
03-25 736
【webpack】第四部分 生产环境基本配置 文章目录【webpack】第四部分 生产环境基本配置4. 生产环境基本配置4.1 提取css为单独文件4.2 css兼容性问题4.3 压缩css4.4 js语法检查eslint4.5 eslint兼容性问题4.6 压缩js和html代码4.7 生产环境的基本配置总结 4. 生产环境基本配置 4.1 提取css为单独文件 npm install --save-dev mini-css-extract-plugin 下载插件 webpack.config
webpack开发与生产环境配置
weixin_33712881的博客
08-04 185
前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli。那个时候工作重点主要也是 vue 的使用，对webpack的配置是知之甚少，期间有问题也是询问大牛 @吕大豹。顺便说一句，对于前端知识体系迷茫的童鞋可以关注豹哥的微信公众号，《大豹杂说》。豹哥对于刚开始小白的自己（虽然现在也白）知无不谈，而且回复超快超认真。这里真...
webpack学习笔记-7-开发环境和生产环境
qq_38652603的博客
06-29 1314
简要介绍了webpack在开发环境和生产环境的使用
webpack学习
肖肖肖丽珠的博客
03-04 162
视频：https://www.bilibili.com/video/BV1e7411j7T5?p=16 文档内容：http://www.woc12138.com/article/45
vue中webpack默认配置_webpack实战——生产环境配置【中】
weixin_40003451的博客
11-29 198
前言上一篇中，描述了一些关于生产环境的配置：环境变量的使用、配置文件描述、开启生产模式、环境变量自定义配置等，从这几个方面入手都可以对生产环境产生一些有利影响。那么本篇，从source map和资源压缩方面入手，继续深入探究。1. source map“source map 指的是将编译、打包、压缩后的代码映射回源代码的过程。经过webpack打包压缩后的代码基本上已经不具备可读性，此时...
vue常见webpack工程化配置
07-31
2. 创建Webpack配置文件：在项目根目录下创建名为webpack.config.js的Webpack配置文件，并初始化基本配置。其中，可以设置mode为development或production，分别代表开发环境和生产环境。 3. 配置Webpack-dev-server...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值