const cdn = '//cdn.bootcss.com';
new ReplacePlugin({
entry: './src/assignment-instructor.html',
//hash: '[hash]',
output: `${psweb_path}/assignment-instructor.html`,
data: {react: `<script src="${cdn}/react/0.14.7/react.min.js"></script>`}
##html页面写法
<!-- replace:react -->
<script src="../js/react.min.js"></script>
<!-- endreplace -->
详细可参考 replace-webpack-plugin
#2、JS中常量的替换
webpack的配置 在plugins中加入
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"',
'process.env.webSocket': '"192.168.0.193"'
##js中使用：
export const webSocketUrl = `ws://${process.env.webSocket}/notice/websocket`;
在js 使用｛｝将在webpack中定义的变量引入即可。 详细可参考webpack DefinePlugin
npm i --save replace-webpack-plugin
要用提供的字符串替换html内容，只需用以下注释将内容包装起来：
<!-- replace:[name] -->
blocks you want to replace
<!-- endreplace -->
如果为true，则跳过Boolean将保留原始内容（默认为false）
条目String原始文件
输出具有替换数据的String新文件
块标识符和新字符串的数据Object键值对
哈希String应该由入门的WebPack哈希来代替字符串
//webpack.config.js
var ReplacePlugin = require ( 'replace-webpack-plugin' ) ;
var config = {
该支持全部替换通过字符串或正则表达式在webpack中运行的html。
$ npm install --save html-replace-all-webpack-plugin
替换一场比赛
new HtmlReplaceWebpackPlugin ( {
matches : [ {
match : / <body> / ,
value : `<body>hello World!` ,
替换两场比赛
new HtmlReplaceWebpackPlugin ( {
matches : [ {
matchStart : / <body> / ,
matchEnd : / < \/ body> / ,
value : `<body>hello Wor
new webpack.ContextReplacementPlugin(
resourceRegExp: RegExp,
newContentResource?: string,
newContentRecursive?: boolean,
newContentRegExp?: RegExp
如果资源（或目录）...
3、使用场景
1 . 在使用 webpack 项目打包的时候，用来将开发环境的请求 URL 替换为 生产环境的 URL 。
2 . 项目统一查找调整页面配色样式 color , 将 #00ff00 替换为 #ff0700 。
3 . 大型项目中，依照打包策略在相关文件中写入不同内容。
以上说白了就是 用webpack-re
1.什么是插件：用于扩展webpack的功能【每个插件的详细请自己去看文档】
注： loader其实也是一种插件，但它只专注于处理文件这一块
使用步骤：下载插件----->在webpack.config.js中的plugins[]中实例化----->配置插件[可选]
---->配置文件中导入require("插件名称")
repalce static files' url in htmlHtml Webpack Replaceurl Plugin此插件需配合html-webpack-plugin使用，作用是将html文档中对本地静态资源(js/style)的引用替换为经webpack编译后url。安装npm install html-webpack-replaceurl-plugin --save-dev使用方法配...
webpack 打包拷贝复制文件夹并修改文件内容 copy-webpack-plugin，
本文代码copy-webpack-plugin版本为：6.0.1，注意大版本之间可能配置参数不一样。
github地址：https://github.com/webpack-contrib/copy-webpack-plugin
首先安装copy-webpack-plugin和path模块
npm installcopy-webpack-plugin path --save-dev
代码如下：
#1、替换html中内容。比如替换js的cdn。 ##webpack的配置const cdn = '//cdn.bootcss.com';new ReplacePlugin({entry: './src/assignment-instructor.html',//hash: '[hash]',output: `${psweb_path}/assignment-instructor.html`,da...
最近在这段时间刚好在温故下webpack源码，webpack5都出来了，4还不再学习下？这次顺便学习下webpack的常用插件html-webpack-plugin。发现这个插件里面还额外加入了自己的hooks，方便其它插件来实现自己的功能，不得不说作者真是个好人。部分代码如下// node_modules/html-webpack-plugin/index.jsapp(compiler) {//...
Webpack 的 DefinePlugin() 函数允许你用另一个令牌替换编译代码中的给定令牌。一个常见的用例是，当您不能直接使用 .env 文件时，使用它来定义环境变量。
假设我们的 .env 文件有一个 KEY 值：
KEY=123456
我们使用 dotenv 模块，并配置如下 webpack：
'use strict'
const webpack = require('webpack'...
配置wepy.config.js
为 plugins 添加 replace 对象，支持单个或者多个规则，多个规则可以以 Array 或者 Object 实现，filter 的对象为生成后文件的路径， 例如'dist/app.js'，每个规则也同时支持多个替换条目，同样是以 Array 或者 Obj...
启用 HMR
HMR 即 Hot Module Replace ，它是 webpack 内置的 HMR 插件，开启该功能后，可以很大程度提高生产效率，通常与 webpack-dev-server 配合使用。
print.js
export default function print(...args) {
console.log(...args);
index.js
console.log('开始执行 index.js');
// 引入该文件
import print from './prin
