再开发过程中难免有时需要对所有的js文件中的某些字符串进行统一处理，l利用webpack提供的自定义loader可以在打包时统一处理

webpack.config.js中配置

rules:[
          test: /\.js$/,
          //loader: 'happypack/loader?id=happybabel',
          loader: './replace-str-loader',
新建replace-str-loader模块，index.js中
 
module.exports = function(context){
    console.log(context);
    return context.replace(/console\.log\(.*?\)/g,"");//一定要renturn出去
app.js
 
console.log(2);
没有自定义loader前打包出来的app.js
 
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["app2"],{
/***/ "./app.js":
/*!*****************!*\
  !*** ./app.js ***!
  \*****************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("console.log(2);\n\n//# sourceURL=webpack:///./app.js?");
/***/ })
},[["./app.js","runtime"]]]);
使用自定义loader之后打包
 
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["app2"],{
/***/ "./app.js":
/*!*****************!*\
  !*** ./app.js ***!
  \*****************/
/*! no static exports found */
/***/ (function(module, exports) {
eval(";\n\n//# sourceURL=webpack:///./app.js?");
/***/ })
},[["./app.js","runtime"]]]);
此方法也可以用来替换任意字符串。replace(/console\.log\(.*?\)/g,"hhhhh");
                    再开发过程中难免有时需要对所有的js文件中的某些字符串进行统一处理，l利用webpack提供的自定义loader可以在打包时统一处理webpack.config.js中配置rules:[      {          test: /\.js$/,          //loader: 'happypack/loader?id=happybabel',          loader:...
				
webpack4项目脚手架从零开始写
webpack4出来也有一段时间了，之前的项目还一直用的是webpack2版本。由于工作太忙，也没有时间去熟悉v3版本的特点与优势。这次所以从4开始重新学习一下webpack的基础配置项以及最新的插件都能干些什么？
所用到的插件
|-- babel                                // 这个几乎是必装的，浏览器识别ES6就全靠它了
|-- html-webpack-plugin                  // 强大的html处理器，没有不用的理由。可以生成模板，给链接添加缓存，压缩...
|-- extract-text-webpack-plugin          // 有了它，我们就可以分离项目中的css，用link的形式来导入到页面中
|-- optimize-css-assets-webpack-p
				
替换捆绑webpack插件
替换webpack编译的包的字符串，与string-replace-webpack-plugin不同，此插件在依赖编译的模块上运行，因此您可以替换任何字符串，甚至require 。
var ReplaceBundleStringPlugin = require ( 'replace-bundle-webpack-plugin' )
plugins: [
    new ReplacePlugin ( [ {
        pattern : / window.require / g ,
        replacement : function ( ) {
            return 'require' ;
    } ] )
3、使用场景
1 . 在使用 webpack 项目打包的时候，用来将开发环境的请求 URL 替换为 生产环境的 URL 。
2 . 项目统一查找调整页面配色样式 color , 将 #00ff00 替换为 #ff0700 。
3 . 大型项目中，依照打包策略在相关文件中写入不同内容。
以上说白了就是 用webpack-re
				
1 webpack介绍
webpack是一个开源的前端打包工具，Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。如：将浏览器无法识别的es6代码转换成es5、sass和less等css框架进行转换成css文件、通过使用pollify解决浏览器兼容等问题。
2 配置文件的作用
配置文件主要是告诉webpack那个文件为打包入口(entry)、向何处输出改文件(output)，在输出的过程中需要通过什么插件帮忙转换和处理代码(loader和plugin)等等，
https://blog.csdn.net/yyone123/article/details/107914309
在遇到webpack时，常见的一种形式是：
!function(e) {
    t = {};
    function n(r) {
        if (t[r]) return t[r].exports;
        var i = t[r] = {
            exports: {}
        return e[r].call(
  热模块替换的实现有两种方式，一种是webpack-dev-server和webpack内置的HMR 插件的结合使用；一种是利用webpack-hot-middleware中间件。本文记录第二种使用方法。
//根据webpack版本安装适应版本的中间件
npm i webpack-hot-middleware  --save-dev
//为每个入口文件添加...
				
要自定义一个 webpack loader，你需要按照以下步骤进行操作：
1. 创建一个新的文件，命名为你的 loader 名称，例如 `my-custom-loader.js`。
2. 在该文件中编写一个函数，该函数将接收源文件内容作为输入，并返回转换后的结果。函数的参数通常包括源文件内容 `source` 和一些可选的 loader 配置项 `options`。
3. 在函数中，你可以对源文件内容进行任何转换操作，例如解析、修改、添加或删除特定的代码等。
4. 使用 CommonJS 模块导出该函数。
下面是一个简单的示例：
```javascript
// my-custom-loader.js
module.exports = function(source, map, meta) {
  // 对源文件内容进行转换操作
  const transformedSource = source.replace(/foo/g, 'bar');
  // 返回转换后的结果
  return transformedSource;
在上述示例中，我们定义了一个简单的 loader 函数，它将源文件中的所有 `foo` 替换为 `bar`。
完成自定义 loader 的编写后，你可以将其应用到 webpack 配置中。在配置文件中使用 `module.rules` 属性来定义 loader 规则，将你的自定义 loader 添加进去。例如：
```javascript
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
        test: /\.js$/, // 匹配需要使用该 loader 的文件
        use: [
          'babel-loader', // 使用其他 loader（可选）
          'my-custom-loader' // 使用自定义 loader
  // ...
在上述示例中，我们将自定义的 `my-custom-loader` 应用到所有的 `.js` 文件上，并且在它之前还使用了一个名为 `babel-loader` 的 loader。
通过这样的配置，当 webpack 构建时，它会自动调用你的自定义 loader 来处理匹配到的文件。你可以根据项目需求和转换逻辑来编写更复杂的自定义 loader。