二、Webpack配置应用

最新推荐文章于 2024-03-04 20:39:28 发布
最新推荐文章于 2024-03-04 20:39:28 发布
阅读量93 收藏
点赞数
分类专栏： webpack4 前端 IT 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxing1923439601/article/details/115364042
版权
前端 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
IT
8 篇文章 0 订阅
订阅专栏
webpack4
2 篇文章 0 订阅
订阅专栏

二、Webpack配置应用

1、多页应用

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  // 多入口
  entry: {
    page1: './src/index1.js',
    page2: './src/index2.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({ // 有两个页面，就需要 new 两次
      template: './src/index1.html',
      filename: 'page_1.html',
      chunks: ['page1'] // [代码块] 引入对应的js文件，这个文件名是 entry 中的命名
    }),
    new HtmlWebpackPlugin({
      template: './src/index2.html',
      filename: 'page_2.html',
      chunks: ['page1', 'page2']
    })
  ]
}

项目目录：
在这里插入图片描述

2、source-map 源码映射

yarn add @babel/core @babel/preset-env babel-loader -D

1. source-map

源码映射，会单独生成一个sourcemap文件，代码出错会标识代码报错的列和行

2. eval-source-map

不会产生单独的文件，但是会显示报错的行和列

3. cheap-module-source-map

不会产生标识代码报错的列和行，但是是一个单独的映射文件。产生文件可以保留，用于调试，找到第几行

4. cheap-module-eval-source-map

如果有报错提示，试试使用这个：eval-cheap-module-source-map

不会产生映射文件，也不会显示对应列，集成在打包后的文件中

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production',
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ],
    // 第一种：源码映射，会单独生成一个sourcemap文件，代码出错会标识代码报错的列和行
    // devtool: 'source-map', // 增加映射文件，可以便于调试源码
    // 第二种：不会产生单独的文件，但是会显示报错的行和列
    // devtool: 'eval-source-map',
    // 第三种：不会产生标识代码报错的列，但是是一个单独的映射文件。产生文件可以保留，用于调试，找到第几行
    // devtool: 'cheap-module-source-map',
    // 第四种：不会产生映射文件，也不会显示对应列，集成在打包后的文件中
    devtool: 'eval-cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

3、Watch 实时打包

实时打包，不需要每次修改代码后手动打包。

// webpack.config.js
module.exports = {
    // ...
    watch: true,
    watchOptions: { // 监控的选项
        poll: 1000, // 每秒问我们1000次是否需要打包
        aggregateTimeout: 500, // 防抖：500ms内一直操作，500ms后还没有操作就打包
        ignored: /node_modules/ // 不需要监控哪个文件
    }
    // ...
}

4. Webapck插件的应用

1. clean-webpack-plugin 打包前先清空当前打包目录下的文件

参考链接：clean-webpack-plugin

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new CleanWebpackPlugin()
    ],
    // ...
}

2.copy-webpack-plugin 拷贝一些静态文件到打包目录下

参考链接：copy-webpack-plugin

通常会用于拷贝一些静态文件到打包目录下

// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                { from: './doc', to: './doc'}
            ]
        })
    ],
    // ...
}

3. bannerPlugin 版权声明

这是Webpack内置的插件

参考链接：bannerPlugin

// webpack.config.js
const Webpack = require('webpack');
module.exports = {
    // ...
    plugins: [
        new Webpack.BannerPlugin('Made my Hanshin')
    ]
    // ...
}

5、跨域处理

// webpack.config.js
module.exports = {
    // ...
    devServer: {
        proxy: {
            // '/api': 'http://localhost:3000'
            '/api': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    }
    // ...
}

6、MOCK数据，仅前端模拟数据

// webpack.config.js
module.exports = {
    // ...
    devServer: {
        before(app) {
            app.get('/api', (req, res) => {
                res.json({
                    key: 'hello world'
                })
            })
        }
    }
    // ...
}

7、有服务端，在服务端中启动webpack，端口使用服务端端口

前后端启动在一起，如下，访问 localhost:3000即可

node server.js 即可

// server.js
const express = require('express');
const app = express();

const webpack = require('webpack');
// 需要中间件
const middle = require('webpack-dev-middleware');
const config = require('./webpack.config');
const compiler = webpack(config);
app.use(middle(compiler));

app.get('/api', (req, res) => {
  res.json({
    key: 'hello world111'
  })
})

app.listen(3000);

8、Webpack解析第三方包

1. 解析引用模块

解析的欧快可能都来源于第三方包。

commonJS 规范：先找当前目录下的 node_modules，找不到在往上找。

所以我们可以配置强制在当前目录找。

// webpack.config.js
module.exports = {
    // ...
    resolve: {
        modules: [path.resolve('node_modules')]
    }
    // ...
}

2. 样式文件的引入，如bootatrap

  • 方案一：
// index.js
import 'bootstrap' // 只这样写不做配置是不会生效的，会默认去找js文件
import 'bootstrap/dist/css/bootstrap.css' // 这样写是生效的

可以这样处理：

  • 方案二：
// index.js
import 'bootstrap'

// webpack.config.js
module.exports = {
    // ...
    resolve: {
        alias: { // 别名
            bootstrap: 'bootstrap/dist/css/bootstrap.css'
        }
    }
    // ...
}
  • 方案三：
// index.js
import 'bootstrap'

// webpack.config.js
module.exports = {
    // ...
    resolve: {
        mainFields: ['style', 'main'] // 主入口的字段，从左往右找，找不到再往右找
    }
    // ...
}

这个 mainFields 对应 bootstrap 下面的 package.json 中的style 、 main 这些key。

mainFiles

// webpack.config.js
module.exports = {
    // ...
    resolve: {
        // 入口文件名，未指定默认找index.js。如果指定了，从左往右找，直到找到为止
        mainFiles: ['index1', 'index']
    }
    // ...
}

3. css等文件的引入

  • 方案一：
// index.js
import './style.css'
  • 方案二：

为了方便，可以这样引入：

// index.js
import './style'

// webpack.config.js
module.exports = {
    // ...
    resolve: {
        // import文件的时候如果没写后缀，自动补充后缀，从左往右，直到找到这个文件为止
        extensions: ['.js', '.css', '.json']
    }
    // ...
}

9、Webapck 定义环境变量及不同环境的处理

下面这样是错误的，会提示 dev 未定义：

// index.js
console.log(DEV);

// webpack.config.js

const Webpack = require('webpack');

module.exports = {
    // ...
    plugins: [
        new Webpack.DefinePlugin({
            DEV: 'dev'
        })
    ]
    // ...
}

可以这样处理：

// index.js
console.log(DEV); // 'dev'
console.log(PRO); // 'PRO'
console.log(NUM); // 2
console.log(TYPE); // true

// webpack.config.js
const Webpack = require('webpack');

module.exports = {
    // ...
    plugins: [
        new Webpack.DefinePlugin({
            DEV: "'dev'",
            PRO: JSON.stringify('PRO'),
            NUM: '1+1',
        	TYPE: 'true'
        })
    ]
    // ...
}

我们可以通过不同文件来区分不同的环境：

新建各自的配置文件 webpack.base.js ， webpack.pro.js，webpack.dev.js

安装插件：yarn add webpack-merge -D

// webpack.base.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

// webpack.dev.js
const { merge } = require('webpack-merge');
const base = require('./webpack.base.js');
const Webpack = require('webpack');

module.exports = merge(base, {
    mode: 'development',
    plugins: [
        new Webpack.DefinePlugin({
            ENV: JSON.stringify('development')
        })
    ]
})


// webpack.pro.js
const { merge } = require('webpack-merge');
const base = require('./webpack.base.js');
const Webpack = require('webpack');

module.exports = merge(base, {
    mode: 'production',
    plugins: [
        new Webpack.DefinePlugin({
            ENV: JSON.stringify('production')
        })
    ]
})
_Hanshin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack配置完全指南
gogo2027的博客
10-03 3084
来看一下官网对webpack的定义：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。首先webpack是一个静态模块打包器，所谓的静态模块，包括脚本、样式表和图片等等；
webpack配置
热门推荐
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
Webpack配置
nanxun201314的博客
03-15 2743
Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。Plugin就是插件，基于事件流框架Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
webpack常用配置
Follow_the_heart的博客
01-23 1608
webpack常规说明
webpack基本配置
weixin_51977111的博客
03-05 9452
不足，请补充
webpack 配置介绍
一杯清泉
03-28 1081
development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异，通过 webpack-merge 可以将基础的配置抽象到 webpack.base.js 中，开发环境和线上环境分别使用 webpack.dev.js 和 webpack.prod.js，然后 merge（webpack.base.js）即可。该功能在打包模式为production时，默认开启，在打包时候回检测是否有标识，有副作用，没有副作用在打包时候不会参与打包。当超过150KB 建议使用。
webpack配置, 一套代码直接配置好
weixin_63203565的博客
05-09 1170
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
webpack的基本的配置和应用
weixin_50789156的博客
04-01 1298
webpack的基本的配置和应用
webpack的基本配置
XINGZI前端程序猿的博客
10-14 435
通过 webpack，开发人员可以将应用程序中的所有资源（包括 JavaScript、CSS、图片等）都视为模块，并通过依赖关系将其打包为小的、优化过的资源。3.模式（mode）：指定打包的模式，有 development、production 和 none 三种模式，分别对应开发环境、生产环境和普通模式。在实际开发中，我们可以根据项目需求和配置要求，适当调整 webpack 的配置文件，以实现更加高效、灵活的打包构建。1.入口（entry）：指定打包的入口文件，可以是单个文件或多个文件。
webpack基础配置及使用
triggerV的博客
03-04 1083
webpack是一个现代 JavaScript 应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图 ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
Webpack配置.docx
05-15
记住，Webpack配置是高度可定制的，可以根据项目需求进行调整。随着项目的复杂性增加，你可能需要配置更多插件和loader来处理不同的资源和需求。始终关注Webpack文档和社区的最佳实践，以保持配置的最新性和高效性。
Webpack：Webpack配置
02-19
在深入Webpack配置之前，我们需要了解Webpack的基本工作原理。Webpack 把项目视为一个由多个模块组成的整体，这些模块可以通过导入（import）和导出（export）相互引用。Webpack 将这些模块通过“loader”进行转换，...
webpack配置配置介绍和操作指引
05-27
## 二、Webpack 配置文件（webpack.config.js） Webpack 的核心配置文件通常命名为 `webpack.config.js`，这是一个 JavaScript 对象，包含各种配置项。 ```javascript module.exports = { entry: './src/index.js...
使用webpack构建应用的方法步骤
10-17
现在，你的Webpack配置已经基本完成，可以通过运行`npx webpack`或`./node_modules/.bin/webpack`命令来打包你的应用。Webpack会解析`entry`，根据`module.rules`中的配置处理所有模块，并按照`output`的设定生成...
Taro中 alias 别名，在文件中引入提示：找不到模块“@/api”或其相应的类型声明
hxing1923439601的博客
12-10 1万+
Taro中 alias 别名，在文件中引入提示：找不到模块“@/api”或其相应的类型声明 在config路径下的 index.js 文件中，直接如下添加即可 const config = { //... alias: { '@/assets': path.resolve(__dirname, '..', 'src/assets'), '@/api': path.resolve(__dirname, '..', 'src/api') } /
JavaScript 数据类型转换详细解释以及parseInt等
hxing1923439601的博客
11-09 803
数据类型转换 一、其他数据类型 => Number类型 1、特定转换为Number Number() parseInt()/parseFloat() 2、隐式转换 浏览器内部先转换为Number后进行运算处理 isNaN() 数学运算 如 1+2，990 + 8 特殊情况：加号两边都有内容，当加号一侧出现字符串时，此时就不是数学运算了，而是字符串拼接 在处理 == 比较时，部分值需要转化为数字后再进行比较（下面会提到） … Number('') // => 0 N
JavaScript如何实现 a == 1 && a == 2 && a == 3？
hxing1923439601的博客
11-22 623
JavaScript如何实现 a == 1 && a == 2 && a == 3？ 今天来看一道面试题，题目如下：如何使 a == 1 && a == 2 && a == 3成立。 分析： 比较两个值是否相等有两种，一个是 “ == ” ， 一个是 “ === ”，而这里使用的是 “ == ” ===：绝对相等，左右两边值和类型都相等。（如 1 === ‘1’ 是不成立的） == ：相等，左右两边类型不同，会默认先转换为相同的类型
JavaScript中基于lodash及jQuery实现对象的extend及浅拷贝、深拷贝
hxing1923439601的博客
11-22 260
// 1、方法扩展 // 2、基于浅比较和深比较实现对象的合并 var extend = function extend (obj) { // 如果不使用obj形参，也可以使用arguments[0] // 是undefined或者null，或者类型检测不是一个对象，抛出一个异常 if (obj == null || typeof obj !== 'object') { throw new TypeError('obj must be an object') } var self
webpack 配置详解
最新发布
05-29
Webpack 是一个现代化的前端项目构建工具，它主要用于打包和优化 Web 应用程序的资源。通过使用模块化加载器和插件，Webpack 可以将多个模块打包成一个或多个单独的 JavaScript 文件。 Webpack 的配置文件是一个 JavaScript 模块，它需要导出一个对象。在配置文件中，你可以指定入口文件、输出路径、模块解析规则、插件等等。 以下是一个简单的 Webpack 配置示例： ``` const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ // 插件配置 ], devtool: 'source-map' }; ``` 上述配置中，我们定义了入口文件为 `./src/index.js`，输出路径为 `dist/bundle.js`。我们还定义了两个模块解析规则，分别是使用 babel-loader 处理 JavaScript 文件和使用 style-loader 和 css-loader 处理 CSS 文件。最后，我们还添加了一个 Source Map 插件。 如果你想深入了解 Webpack 的配置，可以查看官方文档，或者参考其他开发者的博客或教程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值