webpack学习（十四）：生产环境搭建

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

demo地址: https://github.com/Lkkkkkkg/webpack-demo
继上一次配置完react的热替换: https://blog.csdn.net/qq593249106/article/details/84947301

当前 webpack.config.js

目前使用的 webpack 配置文件包含了生产模式和开发模式,
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var devMode = true; //设为开发模式
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
    mode: 'development',
    entry: { //入口文件
        index: "./src/components/index/index.js",
        otherA: "./src/components/otherA/otherA.js",
        otherB: "./src/components/otherB/otherB.js",
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/[name].js', //根据入口文件分为不同出口文件
    },
    devtool: 'inline-source-map', // 不同选项适用于不同环境
    devServer: {
        contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
        port: 8080, //端口号设为8080, 默认也是8080
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                exclude: /node_modules|packages/, //路径
                test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: 'babel-loader', //使用的加载器名称
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
        ]
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new CleanWebpackPlugin(['dist']), //设置清除的目录
        new HtmlWebpackPlugin({
            template: "./src/components/index/index.html", //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            chunks: ['index', 'commons'], //指定入口文件
            filename: "index.html" //指定模板文件的位置
        }),
        new HtmlWebpackPlugin({
            template: "./src/components/otherA/otherA.html",
            chunks: ['otherA', 'commons'],
            filename: "otherA.html"
        }),
        new HtmlWebpackPlugin({
            template: "./src/components/otherB/otherB.html",
            chunks: ['otherB', 'commons'],
            filename: "otherB.html"
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', //类似出口文件
            chunkFilename: 'css/[id].css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
            cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。
            cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给cssProcessor的选项，默认为{}
            canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
        })
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                //打包公共模块
                commons: {
                    chunks: 'initial', //initial表示提取入口文件的公共部分
                    minChunks: 2, //表示提取公共部分最少的文件数
                    minSize: 0, //表示提取公共部分最小的大小
                    name: 'commons' //提取出来的文件命名
                }
            }
        }
    }
};

配置

开发环境(development)和生产环境(production)的构建目标差异很大, 在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server, 而在生产环境中, 我们的目标则转向于关注更小的 bundle, 更轻量的 source map, 以及更优化的资源, 以改善加载时间。由于要遵循逻辑分离, 我们通常建议为每个环境编写彼此独立的 webpack 配置

使用 webpack-merge

将生产模式和开发模式的公共部分写在 webpack.comon.js, 生产模式单独写在 webpack.prod.js, 开发模式单独写在 webpack.dev.js, 然后通过 webpack-merge 这个工具将它们连接起来

安装

npm install webpack-merge --save-dev

分离代码

webpack.common.js

const path = require('path'); //公共模块
const CleanWebpackPlugin = require('clean-webpack-plugin'); //公共插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //公共插件


module.exports = {
    entry: { //公共entry
        index: "./src/components/index/index.js",
        otherA: "./src/components/otherA/otherA.js",
        otherB: "./src/components/otherB/otherB.js",
    },
    output: { //公共output
        path: path.join(__dirname, 'dist'), 
        filename: 'js/[name].js', //根据入口文件分为不同出口文件
    },
    module: {
        rules: [ //公共配置加载器
            {
                exclude: /node_modules|packages/, 
                test: /\.js$/, 
                use: 'babel-loader', 
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']), 
        new HtmlWebpackPlugin({
            template: "./src/components/index/index.html", 
            chunks: ['index', 'commons'], 
            filename: "index.html" 
        }),
        new HtmlWebpackPlugin({
            template: "./src/components/otherA/otherA.html",
            chunks: ['otherA', 'commons'],
            filename: "otherA.html"
        }),
        new HtmlWebpackPlugin({
            template: "./src/components/otherB/otherB.html",
            chunks: ['otherB', 'commons'],
            filename: "otherB.html"
        })
    ]

};

webpac.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development', //开发模式会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader', //开发模式不使用插件
                    'css-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    devtool: 'inline-source-map', //开发模式启用代码跟踪
    devServer: { //开发模式启用服务器
        contentBase: './dist',
        port: 8080,
    }
});

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //生产模式使用分离代码插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //生产模式使用压缩代码插件

module.exports = merge(common, {
    mode: "production", //生产模式会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin.
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader, //生产模式使用分离代码插件
                    'css-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    devtool: 'source-map', //生产模式启用代码跟踪
    plugins: [
        new MiniCssExtractPlugin({ //生产模式使用分离代码插件
            filename: 'css/[name].css'
        }),
        new OptimizeCssAssetsPlugin({ //生产模式使用压缩代码插件
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
            canPrint: true
        })
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                //生产打包公共模块
                commons: {
                    chunks: 'initial', //initial表示提取入口文件的公共部分
                    minChunks: 2, //表示提取公共部分最少的文件数
                    minSize: 0, //表示提取公共部分最小的大小
                    name: 'commons' //提取出来的文件命名
                }
            }
        }
    }
});

修改NPM脚本配置

package.json

{
  "name": "demo05",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --colors --config webpack.prod.js", //生产模式关联 webpack.prod.js 加上--progress显示构建百分比
    "dev": "webpack-dev-server --open --hot --progress --config webpack.dev.js" //开发模式关联 webpack.dev.js 加上--progress显示构建百分比
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-hot-loader": "^4.3.12",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.5"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

运行和打包

终端分别输入 npm run build 和 npm run dev, 都能正常打包和运行

Lkkkkkkg
关注
专栏目录
hand-vue3-project:Vue 3.x + Webpack 5.x 手动搭建开发环境
05-26
9. **构建生产环境**：当开发完成后，使用`npm run build`命令进行生产环境的打包，Webpack会根据配置生成优化过的静态资源。 手动搭建Vue 3.x和Webpack 5.x环境需要一定的前端基础，但这样可以更好地理解项目结构...
webpack4手动搭建Vue开发环境实现todoList项目的方法
10-16
3. **生产环境配置文件** (`webpack.prod.conf.js`)：优化CSS和less的打包，抽离CSS为单独文件，压缩CSS和JavaScript，清理旧的dist文件夹。配置`scripts`中的`build`命令，运行`npm run build`执行生产环境构建。 ...
使用 Webpack 进行生产环境配置（附 Demo）
weixin_34128534的博客
02-01 215
本文从代码压缩、代码拆分、样式分离等三个方面对生产环境的代码进行了优化。只是最简单的一些配置，如果真正运用到项目中，还需要根据项目添加更多配置。 前言 本文讲述的是如何对生产环境下的代码进行压缩，如果还不是太了解 Webpack 的朋友，可以先看一下我的上一篇文章：从零开始搭建一个 Webpack 开发环境配置（附 Demo） 本文项目代码位置：源码地址 环境搭建 项目结构 首先编写一个项目，...
4. webpack 生产环境的基本配置
小丕的博客
03-13 1616
第 4 章：webpack 生产环境的基本配置 开发环境： 源代码 -> webpack+自动化 -> bundle 开发环境中：比如 1. css -> loader -> js ； css经过loader加载会加入到js代码中；会使js代码体积变大；由于先加载js后再插入style标签，会存在闪现现象； .... 生产环境中： 以下操作放在开发环境的话会拖慢开发环境的构建速度，即打包速度较慢，影响开发效率； 4.1 提取 css 成单独文件 1. 下载安装包 2
webpack生产环境和开发环境的配置
Liu_Jun_Tao的博客
08-05 6567
最近在做公司游戏预约页面的时候，在配置webpack的时候，忽略了生产模式切换，导致开发过程中有些痛苦，当改动样式或者某个插件配置时，本地server要等待编译很久才生效。用了很久的webpack做开发，之前一直没太在意，现在特地整理下，也为以后做项目更加规范吧。 在配置前，还是先了解下生产环境和开发环境有哪些区别，知道这些后，才知道我们到底要做些什么 开发环境(development)和生产...
Webpack--生产环境配置
xuan的博客
05-08 1311
一、环境配置的封装 （1）使用相同的配置文件，在构建开始前将当前所属环境作为一个变量传递进去，在webpack.config.js中通过各种判断条件决定具体使用哪个配置。 //package.json { 'script': { 'dev': "ENV=development webpack-dev-server", 'build': 'ENV=production webpack' } } //webpack.config.js const ENV = process.env
webpack之生产环境配置
weixin_50238437的博客
09-20 528
webpack之生产环境配置
详解webpack4.x之搭建前端开发环境
10-17
- **uglifyjs-webpack-plugin**：混淆JavaScript代码以提高生产环境的安全性。 - **webpack-bundle-analyzer**：分析打包后的文件大小，便于优化。 - **clean-webpack-plugin**：每次打包前清理输出目录。 配置...
webpack：:fire:一个功能齐全的Weex和Vue.js项目，这是构建性能极高的Dingtalk microapp的绝佳解决方案
01-31
`webpack2`指的是Webpack的第二个主要版本，它引入了许多改进，比如更好的tree shaking（摇树优化）支持，提高了代码优化的程度，减少了生产环境的包大小。此外，它还改进了配置文件的结构，使得配置更加灵活。 `...
webpack4-template:标记样板
04-29
- **生成生产版本**：`npm run build` 也是预设的脚本命令，用于创建优化过的生产环境版本。这通常包括代码压缩、去除 console.log、合并和最小化 CSS 和 JS 文件等，以提高页面加载速度和减少资源占用。 Webpack 4...
webpack生产环境的配置
kangyi158的博客
04-26 111
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环
webpack生产环境配置
最新发布
weixin_51249285的博客
03-02 625
webpack生产环境配置
webpack配置 - 生产环境
zhenzhenzhen1705的博客
05-12 279
开发环境的配置可以看另外一个篇文章，这篇写的是生产环境的配置 提取css成单独文件 由于css最后是打包到js中，会造成js体积过大，所以要单独提取出来 依赖：npm install mini-css-extract-plugin -D 需要配置plugins 和loader loader 配置：因为style-loader是创建style标签将样式插入，所以要单独提取css出来的话，就要关闭style-loader 使用 MiniCssExtractPlugin.loader MiniCssE
webpack中生产环境配置(仅供参考)
业余前端的职业经历
08-20 272
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生产环境基本配置
weixin_44735573的博客
05-15 264
webpack生产环境基本配置
Webpack-生产环境基本配置
不见浅诗的博客
02-17 263
本篇文章参考以下博文 WebPack实战教程 文章目录前言生产环境基本配置 前言   最近在做一些简单项目的打包，每个小项目的依赖库有细微差异，但是主要的配置信息都相似，css兼容，js兼容，html插件等，不同的是相关插件的使用情况。   本篇文章就初始化一个生产环境的基本配置，方便以后用来直接使用。 生产环境基本配置   基本配置如下： 首先配置了入口和出口； 然后做css的配置，其中包括兼容和压缩； less文件配置 js语法检查 js兼容 图片检测 html中的图片 其他文件 最后插件的部分对
②webpack 生产环境配置
一个努力学习的程序猿
04-22 358
webpack生产环境配置提取css成单独文件css兼容性处理压缩css 本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷 生产环境配置 开发环境配置能够让我们更方便，而生产环境配置能让代码优化，性能更好，让代码兼容浏览器，更平稳的运行。 提取css成单独文件 index.js import '../css/a.css'; import...
webpack配置指南：搭建pixi.js游戏开发环境
文章将逐步指导读者配置webpack，包括编写webpack.common.js、webpack.dev.js和webpack.prod.js等不同配置文件，以适应开发和生产环境的需求。在开发环境中，webpack通常会开启热模块替换（Hot Module Replacement）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值