实战 webpack 4 配置解析三

最新推荐文章于 2024-03-27 15:27:02 发布
最新推荐文章于 2024-03-27 15:27:02 发布
阅读量483 收藏
点赞数
分类专栏： webpack 文章标签： webpack 4 webpack 4配置

接上篇： 实战 webpack 4 配置解析二

WEBPACK.DEV.JS 解析

现在让我们看看我们的 webpack.dev.js 配置文件，它包含了我们项目开发时用于开发构建的所有设置。它与 webpack.common.js 中的设置合并形成了一个完整的webpack 配置。

// webpack.dev.js - developmental builds
const LEGACY_CONFIG = 'legacy';
const MODERN_CONFIG = 'modern';

// node modules
const merge = require('webpack-merge');
const path = require('path');
const sane = require('sane');
const webpack = require('webpack');

// webpack plugins
const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();

// config files
const common = require('./webpack.common.js');
const pkg = require('./package.json');
const settings = require('./webpack.settings.js');

在前面部分，我们还是先引入我们需要的 Node 包，以及我们使用的 webpack 插件。然后我们将 webpack.settings.js 导入，以便我们可以访问那里的配置，并将 package.json 作为 pkg 导入，以便访问那里的一些配置。

我们还导入 webpack.common.js 公共 webpack 配置，用来合并我们的开发环境的配置。

CON­FIG­U­RA­TION FUNTIONS（配置函数）

看看 configureDevServer() 长什么样：

// Configure the webpack-dev-server
const configureDevServer = (buildType) => {
    return {
        public: settings.devServerConfig.public(),
        contentBase: path.resolve(__dirname, settings.paths.templates),
        host: settings.devServerConfig.host(),
        port: settings.devServerConfig.port(),
        https: !!parseInt(settings.devServerConfig.https()),
        quiet: true,
        hot: true,
        hotOnly: true,
        overlay: true,
        stats: 'errors-only',
        watchOptions: {
            poll: !!parseInt(settings.devServerConfig.poll()),
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        // Use sane to monitor all of the templates files and sub-directories
        before: (app, server) => {
            const watcher = sane(path.join(__dirname, settings.paths.templates), {
                glob: ['**/*'],
                poll: !!parseInt(settings.devServerConfig.poll()),
            });
            watcher.on('change', function(filePath, root, stat) {
                console.log('  File modified:', filePath);
                server.sockWrite(server.sockets, "content-changed");
            });
        },
    };
};

当我们进行生产环境构建时，webpack 会绑定所有各种资产并将它们保存到文件系统中。相比之下，当我们在本地开发时，我们用 webpack-dev-server 来进行开发构建：

  • 启动本地的 Express web 服务为资源提供服务。
  • 为了速度，在内存构建我们的资源，而不是文件系统中。
  • 当我们更改 JavaScript，CSS，Vue组件等这些资源时，它们将会重新构建，但这不需要重新刷新页面，是通过热模块替换（HMR）将它们注入网页的。
  • 我们在更改模版时会重新加载页面。

这类似于更复杂的 Browsersync 的变体，并大大提高了开发效率。

这里唯一有点不同的是我们使用 Sane 监视未通过 webpack 运行的文件（在本例中为我们的模板），以便在其中一个更改时执行整页重新加载。

请注意，webpack-dev-server 的配置仍然来自我们的 webpack.settings.js 文件。对于很多人来说默认值可能已经够用了，但是我使用 Laravel Homestead 作为本地开发人员，正如 Local Devel­op­ment with Vagrant / Home­stead 这篇文章中所讨论的那样。这意味着我在我的 Homestead VM 中运行所有开发工具。

因此，不要在我的 webpack.settings.js 文件中对本地开发环境进行硬编码（因为它可能因团队中的人而异），webpack.settings.js 可以从一个可选的 .env 文件中读取拥有特定的 devServer 配置：

# webpack example settings for Homestead/Vagrant
DEVSERVER_PUBLIC="http://192.168.10.10:8080"
DEVSERVER_HOST="0.0.0.0"
DEVSERVER_POLL=1
DEVSERVER_PORT=8080
DEVSERVER_HTTPS=0

您可能使用有别与我，所以根据你的需要把 .env 文件改成适合你的配置。dotenv 背后的思想是我们在 .env 文件中配置了一个特定于环境的东西，我们不会将它提交到我们的 git 仓库。如果 .env 文件不存在，那也很好，使用默认值就好了：

devServerConfig: {
    public: () => process.env.DEVSERVER_PUBLIC || "http://localhost:8080",
    host: () => process.env.DEVSERVER_HOST || "localhost",
    poll: () => process.env.DEVSERVER_POLL || false,
    port: () => process.env.DEVSERVER_PORT || 8080,
    https: () => process.env.DEVSERVER_HTTPS || false,
},

下面是 configureImageLoader() ：

// Configure Image loader
const configureImageLoader = (buildType) => {
    if (buildType === LEGACY_CONFIG) {
        return {
            test: /\.(png|jpe?g|gif|svg|webp)$/i,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[hash].[ext]'
                    }
                }
            ]
        };
    }
    if (buildType === MODERN_CONFIG) {
        return {
            test: /\.(png|jpe?g|gif|svg|webp)$/i,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[hash].[ext]'
                    }
                }
            ]
        };
    }
};

我们传入 buildType，以便我们可以返回不同的结果，具体取决于它是旧版构建还是新版构建。在这个例子中，我们返回了相同的配置，但这也很可能会变。

需要重点注意的是这仅适用于我们的 webpack 构建中包含的图像;很多其他图像都来自其他地方（CMS系统，资产管理系统等）。

要让 webpack 处理图像，请需要将其导入 JavaScript：

import Icon from './icon.png';

有关详细信息，请查看 webpack 文档关于 “加载图像” 的部分。

下面是我们 configurePostcssLoader() 函数：

// Configure the Postcss loader
const configurePostcssLoader = (buildType) => {
    // Don't generate CSS for the legacy config in development
    if (buildType === LEGACY_CONFIG) {
        return {
            test: /\.(pcss|css)$/,
            loader: 'ignore-loader'
        };
    }
    if (buildType === MODERN_CONFIG) {
        return {
            test: /\.(pcss|css)$/,
            use: [
                {
                    loader: 'style-loader',
                },
                {
                    loader: 'vue-style-loader',
                },
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        sourceMap: true
                    }
                },
                {
                    loader: 'resolve-url-loader'
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true
                    }
                }
            ]
        };
    }
};

我们使用 PostCSS 来处理所有 CSS，包括 Tailwind CSS。我认为它是 CSS 的Babel，因为它将各种高级 CSS 功能编译成您的浏览器可以理解的普通 CSS。

需要要注意的是，对于 webpack 加载器，它们处理的顺序与它们列出的顺序相反：

  • postc­ss-loader  - 将文件加载并处理成 PostCSS。
  • resolve-url-loader - 将 CSS 中的任何 url() 重写为相对公共路径。
  • css-loader - 解决了我们所有的 CSS @import 和 url()。
  • vue-style-loader - 把 .vue 单文件组件中内联的所有样式注入 CSS 文件。
  • style-loader - 将所有 CSS 注入到 <style></style> 内联标签的文档中。

记住，因为这是在本地开发所做的事情，所以我们不需要做任何多余的事情将所有 CSS 提取到最小化文件中。相反，我们只是让 style-loader 在我们的文档中内联它。

webpack-dev-server 将会对 CSS 使用热模块更换（HMR），因此不论什么时候我们更改内容，它都会自动重新构建和注入 CSS。这还是有点神奇。

我们通过包含它来告诉 webpack 处理 CSS：

import styles from '../css/app.pcss';

这个在 webpack 的文档 Loading CSS 这节有更详细的讨论。

我们从 App.js 入口点开始;将此视为 PostCSS 的切入点。app.pcss 文件 @import 我们项目使用的所有CSS;稍后将详细介绍。

MODULE.EXPORT （模块导出）

最后，module.exports 使用 webpack-merge 将 webpack.common.js 中的common.legacyConfig 与我们的开发旧版配置合并，并将 common.modernConfig 与我们的开发新版配置合并：

// Development module exports
module.exports = [
    merge(
        common.legacyConfig,
        {
            output: {
                filename: path.join('./js', '[name]-legacy.[hash].js'),
                publicPath: settings.devServerConfig.public() + '/',
            },
            mode: 'development',
            devtool: 'inline-source-map',
            devServer: configureDevServer(LEGACY_CONFIG),
            module: {
                rules: [
                    configurePostcssLoader(LEGACY_CONFIG),
                    configureImageLoader(LEGACY_CONFIG),
                ],
            },
            plugins: [
                new webpack.HotModuleReplacementPlugin(),
            ],
        }
    ),
    merge(
        common.modernConfig,
        {
            output: {
                filename: path.join('./js', '[name].[hash].js'),
                publicPath: settings.devServerConfig.public() + '/',
            },
            mode: 'development',
            devtool: 'inline-source-map',
            devServer: configureDevServer(MODERN_CONFIG),
            module: {
                rules: [
                    configurePostcssLoader(MODERN_CONFIG),
                    configureImageLoader(MODERN_CONFIG),
                ],
            },
            plugins: [
                new webpack.HotModuleReplacementPlugin(),
                new DashboardPlugin(dashboard.setData),
            ],
        }
    ),
];

通过在 module.exports 中返回一个数组，我们告诉 webpack 我们需要完成多个编译：一个用于我们的旧版构建，另一个用于我们的新版构建。

需要注意，对于旧版构建，我们将处理后的 JavaScript 输出为 [name]-legacy.[hash].js，而新版构建将其输出为 [name].[hash].js。

通过将 mode 设置为 ‘development’，我们告诉 webpack 这是开发版本的构建。

通过将 devtool 设置为 ‘inline-source-map’，我们要求将 CSS/JavaScript 的 .map 内联到文件中。这使文件变得庞大，但它便于调试。

webpack.HotModuleReplacementPlugin 用来支持 Webpack 的热模块替换（HMR）。

DashboardPlugin 插件让我们感觉自己像一个宇航员，盯着酷炫的 webpack 构建面板：

在这里插入图片描述

我发现 DashboardPlugin 开发 HUD （Head Up Display 平视显示器）比默认的webpack 进度滚动更有用。

就这样，我们现在为我们的项目提供了很棒的开发构建环境。

下篇：

实战 webpack 4 配置解析四

userkang
关注
专栏目录
Webpack配置实战
gogo2027的博客
10-31 444
本文从 Webpack 基础配置、Webpack 进阶配置 2 个角度进行讲述，从 Webpack 实践着手，和你一起了解 Webpack。
Webpack配置全解析（基础篇），前端面试题及答案2024
最新发布
wfegre的博客
03-30 934
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记战项目、讲解视频，并且后续会持续更新**如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）[外链图片转存中…(img-CScBNKcE-1711800932528)]
webpack4 源码分析(一) 入口及webpack.js
林中路
04-18 958
webpack4 源码分析(一) 入口及webpack.js 1.命令行入口 一般来说，我们通过 npm run webpack --config xx.js ... 命令来启动webpack。 当我们在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目录查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不存在，就抛出错误。...
webpack4打包后的代码分析
yhzzy的博客
07-05 309
此文分析时使用的依赖包版本号如下： "devDependencies": { "html-webpack-plugin": "4.5.0", "webpack": "4.44.2", "webpack-cli": "3.3.12" } webpack配置文件如下： const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { devtool:
[webpack4] 概念
weixin_36210698的博客
01-07 244
概念 原文链接：概念 本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。 可以从这里了解更多关于JavaScript模块和webpack模块的信息。 从web...
webpack4+vue2+axios+vue-router的多页+单页混合应用框架
weixin_34293902的博客
09-04 140
VUE2的单页应用框架有人分享了，多页应用框架也有人分享了，这里分享一个单页+多页的混合应用框架吧，node.js写了一个简单的mock服务也集成在里面，整体初现雏形，还有很多需要优化和改善的地方。。。 项目结构 │ ├─build /* webpack的配置目录 */ │ ...
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（四）调整 App.vue 和 router 路由
热门推荐
FungLeo's Blog
08-26 4万+
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（四）调整 App.vue 和 router 路由前情回顾在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（三）认识项目所有文件》，我们已经重新整理了我们的目录结构，如果你已经忘记了，可以先去看一下。如果你按照我的结构框架去调整了之后，那么，现在你的项目应该是出错，并
webpack的配置和插件的使用介绍代码
12-25
4. `resolve`：解析配置，用于设置模块的解析策略，如别名、模块目录等。 5. `plugins`：插件配置，Webpack 插件可以执行更复杂的任务，如静态资源注入、代码分割、优化等。 二、Webpack 加载器（Loaders） 加载器...
Webpack 从零入门到工程化实战.rar
12-29
Webpack 提供了强大的依赖关系解析，使得我们可以按需加载模块，大大优化了应用的性能。 在“Webpack 从零入门到工程化实战”中，你将学习到以下关键知识点： 1. **Webpack 基本概念**： - **Entry（入口）**：...
实战 webpack 4 配置解析一
userkang的博客
11-08 543
随着Web开发变得越来越复杂，我们需要工具来帮助我们构建现代网站。 这是一个复杂的webpack 4配置的完整的现实生产示例。 构建现代网站已成为自定义应用程序的开发。网站不仅仅被当作一个营销网站，因为它们还具备了传统应用的功能。 当一个过程变得复杂时，我们就会将其分解为可管理的组件，并使用工具自动化构建过程。这种情况不论我们是在制造汽车、起草法律文件还是建立网站。 使用正确的工具 像 we...
webpack视频教程及源码百度云盘下载地址
08-12
webpack
扶着你玩转webpack4——基础配置
假面猫的博客
07-13 662
webpack4的改动其实挺大，但破坏性更新不算太多，称得上破坏性更新的恐怕只有 CommonChunkPlugin 的移除了。 和 webpack2 或者 webpack3 一样，你将很容易写出这样的配置。 const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') ...
webpack.dev.js（webpack开发环境配置文件）
like_a_diamond的博客
03-27 444
webpack开发环境配置文件及运行命令
webpack（11）区分开发配置和生成配置
weixin_45750073的博客
02-28 200
项目总要上线，开发时候的配置不一定符合生产时候的配置，这时就要两套配置。1、根目录下面创建config文件夹，存放两套配置2、webpack.dev.js的配置，相对路径相对的是根目录，所以即使有上一层，也不会改变，但是绝对路径要加上上一层config,开发模式不需要输出dist文件夹，可以去掉path和clean的配置。//node.js核心模块之一，路径模块//引入eslint插件//引入HTML插件// 1、入口文件路径，相对路径。
vue-cli分析-webpack.dev.config.js
weixin_34384557的博客
08-08 2419
本系列文章主要讲下vue的webpack脚手架的前因后果,逐行分析其操作。如果写的有问题请务必指出！如果觉得写的还不错点个赞就是对我最大的鼓励了,谢谢！ 架构说明 当使用vue-cli脚手架生成项目后,项目架构与其作用大概是这样的： build负责针对不同编译环境,webpack采用哪些配置,摒弃哪些机制相关 config是build编译文件的另外扩展,把需要用到的配置提取出来,让配置更模块化 ...
webpack开发配置（webpack.base.js/webpack.dev.js/webpack.prod.js）
kingov
08-16 1万+
项目初始结构分析通常项目会分成三个运行环境：开发人员在本地跑的开发环境(dev)、测试人员用来做黑盒测试的测试环境(test)和线上运行的生产环境(production)。 简单起见，本文只考虑开发环境(dev)和生产环境(prod)，测试环境可以自行类比。 综上，webpack的配置需要有两套，同时两套配置必然会存在相同的部分，故新建目录与文件如下图： folder 同时引入一个库webpack-
webpack使用环境变量process.env
qq_40031303的博客
09-18 2482
前言 在现有的项目中，我们时常需要将项目打包放入测试或者上线的环境中，然而基于全栈cdn打包的项目需要修改vue.config.js中的publicPath的路径（或接口路径）为测试或正式，那么修改vue配置文件必须在打包前操作，为了去除每次打包前手动更改这种操作，使用process.env环境变量做判断是最好的选择。 1、在正式上代码之前我们先了解 Vue CLI 项目的三个模式： development 模式用于 vue-cli-service serve test 模式用于 vue-cli-serv
一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别
vv_bug
10-24 2万+
一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别 简介 用过 vue-cli 脚手架搭建 vue 项目都知道，vue-cli 中内置了 vue-style-loader 去加载样式模块，最后通过 <style> 标签把样式加载到页面，但是 style-loader 同样可以达到同样的效果，那么 vue 官方为啥还封装一个 vue-style-loader 库呢？那么它们到底有啥区别？平时项目中又该如何选择呢？ 下面先看一下它们各自官网的简介。 开始
vue调用style-loader报错
wwhtsl的博客
11-09 1397
vue使用style-loader将css样式添加到DOM中报错 ERROR in ./src/css/normal.css Module build failed: CssSyntaxError (1:1) Unknown word > 1 | var content = require("!!./normal.css"); | ^ 2 | 3 | if (typeof content === 'string') { @ ./src/main.js 11:0-27 npm
webpack4 splitChunk深度解析与实战配置
"这篇文章除了介绍webpack4的splitChunk插件的初衷，还详细讲解了该插件的一些常用参数及其作用，并提供了完整的配置示例。作者在探索webpack4的splitChunk配置过程中，发现很多用户对此有困惑，于是决定分享自己的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值