webpack生产环境的基本配置（三）

最新推荐文章于 2023-10-09 18:57:07 发布
最新推荐文章于 2023-10-09 18:57:07 发布
阅读量129 收藏
点赞数
分类专栏： webpack 前端 文章标签： webpack vue nodejs less js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40359716/article/details/114706223
版权

1. 提取 css 成单独文件

  1. 下载安装包
  2. 下载插件
npm install --save-dev mini-css-extract-plugin
  1. 修改配置文件
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标签，将样式放入
          // 'style-loader', 
          // 这个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'
};
  1. 运行指令: webpack

2. css 兼容性处理

  1. 创建文件
    在这里插入图片描述

  2. 下载 loader

npm install --save-dev postcss-loader postcss-preset-env
  1. 修改配置文件
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',
          /*
            css兼容性处理：postcss --> postcss-loader postcss-preset-env

            帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

            "browserslist": {
              // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境：默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
          */
          // 使用loader的默认配置
          // 'postcss-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'
};
  1. 修改 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%",
   "not dead",
   "not op_mini all"
 ]
}
  1. 运行指令: webpack

3. 压缩 css

  1. 创建文件
  2. 下载安装包
npm install --save-dev optimize-css-assets-webpack-plugin
  1. 修改配置文件
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'
};
  1. 运行指令: webpack

4. js 语法检查

  1. 创建文件
  2. 下载安装包
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
  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')
  },
  module: {
    rules: [
      /*
        语法检查： eslint-loader  eslint
          注意：只检查自己写的源代码，第三方的库是不用检查的
          设置检查规则：
            package.json中eslintConfig中设置~
              "eslintConfig": {
                "extends": "airbnb-base"
              }
            airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
      */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};
  1. 配置package.json
  "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },
  1. 运行指令: webpack

5. js兼容性处理

  1. 创建文件
  2. 下载安装包
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
  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')
  },
  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'
};
  1. 运行指令: webpack

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')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'
};

7. HTML 压缩

  1. 创建文件
  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')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

8.生产环境配置

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'
};
Shelly~
关注
专栏目录
Webpack开发环境基本配置的优化
weixin_43838485的博客
02-11 340
Webpack开发环境基本配置的优化： 优化1（文件分类打包）： 输出没有指定js文件，样式文件，图片文件的路径，打包后如下： 想要将js及样式打包在一个指定的js文件夹下，需要指定一个js文件夹： 将js,img，其他资源输出到指定的文件夹中，打包后文件夹结构如下： 备注：以上打包方式会将js和css都打包在js文件中 优化2（将css文件从js中提出来） 如果想要将css文件单独打包出来，需要用到 mini-css-extract-plugin插件，使用方法如下： 引入插件 **const Mi
app 二次打包工具合集
08-15
工具介绍： apktool 作用：资源文件获取，可以提取出图片文件和布局文件进行使用查看 dex2jar 作用：将apk反编译成Java源码（classes.dex转化成jar文件） jd-gui 作用：查看APK中classes.dex转化成出的jar文件，即源码文件
webpack 2 打包实战
weixin_34092370的博客
04-24 278
2019独角兽企业重金招聘Python工程师标准>>> ...
webpack2 打包 react
xuelang532777032的博客
03-27 1609
1、新建三个文件结构如下： webpack.config.js var webpack=require('webpack'); //var HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const BEFORE_PATH = path.join(__dirnam
webpack 二次总结
鹿杖客的博客
02-01 259
前言：在6月份的时候写了一个关于vue-cli的webpack探究，当时似懂非懂，现在回过头来，感觉还是欠缺不少，这次看了技术胖的博客，感觉受益匪浅 技术胖博客 1:webpack介绍 webpack 模块打包机 目的:分析你的目录接口，找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言，将其打包和转换为合适供浏览器使用的格式。webpack还有优化功能 打包：多个
wepack二 打包项目文件及配置
SHALLNY
06-21 561
1.在前面webpack学习一的基础上继续进行学习 在之前是基础的文件，实际会出现多个js文件等/包括执行命令的复杂性 2.在项目根目录下添加文件夹app / public 分别在app内添加入口文件 main.js 以及 Greeter.js //main.js const greeter = require('./Greeter.js'); document.querySele...
webpack开发环境和生产环境的深入理解
01-19
以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享...
webpack 2.x配置reactjs基本开发环境详解
11-30
Webpack 2.x 配置ReactJS基本开发环境详解旨在帮助开发者搭建一个适合初学者的React应用开发环境。本文主要关注的版本是Webpack 2.2 和 React 15.4.2。随着Webpack从1.x升级到2.x，一些重要的接口如`module.loaders`...
webpack+typescript环境配置.zip
04-23
接下来，我们将深入探讨如何配置一个基于 Webpack 和 TypeScript 的开发环境，以及如何进行项目结构搭建和打包发布。 1. **安装依赖** 在创建新项目之前，首先确保已安装 Node.js。然后通过 `npm`（Node Package ...
webpack 2.xx自动打包配置 及axios二次封装
web修理工
07-18 315
package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config --hot --host 0.0.0.0 build/webpack.dev.conf.js", "dev:test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js", "dev:prod":
Webpack-生产环境基本配置
不见浅诗的博客
02-17 257
本篇文章参考以下博文 WebPack实战教程 文章目录前言生产环境基本配置 前言   最近在做一些简单项目的打包，每个小项目的依赖库有细微差异，但是主要的配置信息都相似，css兼容，js兼容，html插件等，不同的是相关插件的使用情况。   本篇文章就初始化一个生产环境的基本配置，方便以后用来直接使用。 生产环境基本配置   基本配置如下： 首先配置了入口和出口； 然后做css的配置，其中包括兼容和压缩； less文件配置 js语法检查 js兼容 图片检测 html中的图片 其他文件 最后插件的部分对
webpack打包缓存_webpack系列 充分利用缓存提升二次构建速度
weixin_31368213的博客
01-04 498
目的：提升二次构建速度缓存思路：babel-loader开启缓存terser-webpack-plugin开启缓存使用hard-source-webpack-plugin1,babel-loader开启缓存开启babel缓存，在第二次打包时，打包构建速度更快在webpack配置文件webpack.config.js中开启babel缓存module.exports = {...m...
前端-webpack生产环境基本配置
Apple_Coco的博客
07-02 423
提取 css 成单独文件 css 兼容性处理 压缩 css js 语法检查 js 兼容性处理 js 压缩 HTML 压缩 生产环境配置汇总 提取 css 成单独文件 下载 plugin npm i mini-css-extract-plugin -D 修改配置文件 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractP.
webpack中生产环境配置(仅供参考)
业余前端的职业经历
08-20 270
webpack.config.js // 引入path核心库 const path=require('path'); // 提取css const MiniCssExtractPlugin=require('mini-css-extract-plugin'); // 压缩css const OptimizeCssAssetsPlugin = require ('optimize-css-assets-webpack-plugin'); // 处理html文件 const HtmlWebpackPlu
webpack打包时如何修改文件名
hfhan的博客
06-14 5663
webpack打包时如何修改文件名 在使用webpack进行项目打包的时候，我们可通过以下方式对不同类型的资源，进行文件名或文件路径的修改
webpack不同环境下使用CSS分离插件mini-css-extract-plugin
最新发布
黎小小的博客
10-09 2858
不同环境下的打包，如果出现图片显示不了时（特别是css中的图片），请检查publicPath的配置。会开启tree-shaking和js代码压缩，但配置会使默认的压缩功能失效。所以，指定css压缩插件的同时，务必指定js的压缩插件。插件，结合配置，可以把css代码打包到单独的css文件，且可以设置存放路径（通过设置插件的filename和生产环境下不能使用devtool:"inline-source-map"，而用devtool:"source-map"
解决webpack报错：You forgot to add ‘mini-css-extract-plugin‘ plugin
jiaohuizhuang6019的博客
09-29 2457
解决webpack报错：You forgot to add 'mini-css-extract-plugin' plugin
【前端学习记录】webpack学习之mini-css-extract-plugin插件
Note_creek的博客
03-20 1716
mini-css-extract-plugin学习记录
mini-css-extract-plugin插件快速入门
蜡笔小开心❤的博客
08-16 709
webpack4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。更多介绍请看移步：webpack 4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件（从css文件中提取css代码到单独的文件中，对css代码进行代码压缩等）。不同环境下的打包，如果出现图片显示不了时（特别是css中的图片），请检查publicPath的配置。会开启tree-shaking和js代码压缩
Vue-cli深度实践：Webpack多环境配置与发布策略
Vue-cli创建的项目结构中，`build`目录包含了编译任务的代码，如`webpack.base.conf.js`是基础配置，`webpack.dev.conf.js`是开发环境配置，而`webpack.prod.conf.js`是生产环境配置。`config`目录下的`dev.env.js`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值