Webpack从0小计

最新推荐文章于 2023-05-15 10:15:57 发布
最新推荐文章于 2023-05-15 10:15:57 发布
阅读量345 收藏
点赞数
分类专栏： 前端 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44828370/article/details/121040782
版权

文章目录

Webpack体系学习

占位符：[name]_[hash]

lifecycle_4a919f7471e246973e7380cf0871a739.png

一、为什么使用 webpack？
1. 在面向对象开发中存在的问题

1.不易维护，各各文件间，牵一发而动全身，易出bug

—src 例子：

  • —index.html
  • —content.js
  • —header.js
  • —footer.js
  • —index.js

  1. index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>为什么使用 webpack？</title>
</head>
<body>
<div id="app"></div>
<script src="content.js"></script>
<script src="footer.js"></script>
<script src="header.js"></script>
<script src="./index.js"></script>
</body>
</html>

  2. index.js

    // 面向对象  这种写法，对代码的维护性，拓展性不利，
// 1. 从当前目录下并不能知道其他文件的变量名，变量冲突。。
// 2. 在index.html文件中，引入的 js文件过多会导致，加载变慢！
// 由此引出  webpack 的解决方案：
const app = document.getElementById('app');
new Footer();
new Header();
new Footer();

  3. footer.js

    function Footer() {
  const footer = document.createElement('div');
  footer.innerHTML = 'Footer';
  app.appendChild(footer)
}

  4. content.js

    function Content() {
  const content = document.createElement('div');
  content.innerHTML = 'Content';
  app.appendChild(content);
}

  5. header.js

    function Header() {
  const header = document.createElement('dic');
  header.innerHTML = 'Header';
  app.appendChild(header);
}

  6. 结果：

    image-20211028145907259

2. webpack解决方案-使用原因

优势：

  1. 使用一个 js文件，减少了 http的请求次数：只用一次即可
  2. 方便维护，模块与模块之间的冲突少
  3. 能够使用 CommonJS、ES6 模板
  4. 加之 webpack的其他优势：压缩，非 JS文件的使用…等等

  1. 只保留一个 index.js引入

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>为什么使用 webpack？</title>
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>

  2. 在 index.js文件下 import导入依赖 js文件

    import Header from './header.js'  // 这是 export 默认的方式！！！
import Content from './content.js'
import Footer from './footer.js'

const app = document.getElementById('app');
new Footer();
new Header();
new Content();

  3. 在其他 js文件中 export 导出

    // content.js
function Content() {
  const app = document.getElementById('app');
  const content = document.createElement('div');
  content.innerHTML = 'Content';
  app.appendChild(content);
}

export default Content;

    //footer.jsfunction Footer() {  const app = document.getElementById('app');  const footer = document.createElement('div');  footer.innerHTML = 'Footer';  app.appendChild(footer)}export default Footer;

    // headerfunction Header() {  const app = document.getElementById('app');  const header = document.createElement('dic');  header.innerHTML = 'Header';  app.appendChild(header);}export default Header;

  4. 配置 webpack.config.js

    const path = require('path')module.exports = {  // 模式：mode？这个有什么作用？  mode:'development',  // 入口：__dirname :webpack.config.js的目录,src:src文件的index.js 文件开始打包  entry: path.join(__dirname,'src','index.js'),  // 出口：path，输出到那个目录下，filename：输出文件的名字!  output:{    path:path.join(__dirname,'dist'),    filename:'bundle.js'  },}

  5. 配置 packages.json 文件

    {  "name": "myWebpack",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {      // 能够使用 npm run webpack的关键    "build": "webpack"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "webpack": "^5.60.0",    "webpack-cli": "^4.9.1"  }}

  6. npm run build 打包

    dist文件，在 index.html中引入 dist的文件

    <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>为什么使用 webpack？</title></head><body><div id="app"></div><script src="../dist/bundle.js"></script></body></html>

  7. 结果：

    image-20211028161251041

二、webpack的运行原理|流程
深入浅出：https://webpack.wuhaolin.cn/3%E5%AE%9E%E6%88%98/3-9%E4%B8%BA%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8%E7%94%9F%E6%88%90HTML.html手撸实现webpack：https://segmentfault.com/a/1190000021494964

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)， 其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

**webpack 就像一条生产线，**要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。

webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。

1.初始化参数

从配置文件和 shell 语句中读取于合并参数，得出最终的参数

2.开始编译

用上一步得到的参数初始化 Compiler对象，加载所有配置的插件，执行对象的 run 方法开始执行编译。

3.确定入口

根据配置中的 entry 找出所有的入口文件

4.编译模块

从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理

5.完成模块编译

在经过第4步使用的 Loader 翻译完所有模块后，得到每个模块被翻译后的最终内容以及他们之间的依赖关系。

6.输出资源

根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会

7.输出完成

在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果
三、Webpack的核心概念
1.入口-entry

**入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。**进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的

  1. 单个入口语法(用法)

    webpack.config.js

    module.exports = {    entry:'./path/to/my/entry/file.js'}

  2. 多个入口时

    module.exports = {    entry:{        main:'./src/index.js',        sub:'./src/index.js'    }}

  3. 分离 应用程序(app) 和 第三方库(vendor) 入口

    module.exports = {     entry: {         app: './src/app.js',         vendors: './src/vendors.js'  }}

  4. 多页面应用程序

    module.exports = {  entry: {    pageOne: './src/pageOne/index.js',    pageTwo: './src/pageTwo/index.js',    pageThree: './src/pageThree/index.js'  }};

    **这是什么？ ** 告诉 webpack 需要 3 个独立分离的依赖图，三个入口文件

    **为什么？**在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事：

    • 使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益，这样可以加快页面加载的速度，提高用户的体验。

    根据经验：每个 HTML 文档只使用一个入口起点

2.出口-output

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

  1. 基本用法

    output 属性有最低要求：值须设为 一个对象，包含下面两点

    • filename 用于输出文件的文件名。
    • 目标输出目录 path 的绝对路径。
    module.export = {  output: {    filename: 'bundle.js',    path: '/home/proj/public/assets'  }};

    此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。

  2. 多个入口起点情况

    {  entry: {    app: './src/app.js',    search: './src/search.js'  },  output: {    // `[name].js`  占位符    filename: '[name].js',           path: __dirname + '/dist'    }}// 写入到硬盘：./dist/app.js, ./dist/search.js

    如下图：占位符使用以及，publicPath：‘http…’,地址前+前缀

    image-20211028161959050

  3. 高级进阶

    以下是使用 CDN 和资源 hash 的复杂示例：

    config.js

    output: {  path: "/home/proj/cdn/assets/[hash]",  publicPath: "http://cdn.example.com/assets/[hash]/"}

    在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 __webpack_public_path__。

    __webpack_public_path__ = myRuntimePublicPath

// 剩余的应用程序入口
3. loader

webpack 是默认知道 .js 文件的，对应其他的如 .css .jpg .png是不知道，这就需要使用–loader 来处理！

loader 用于模块的源代码进行转换。

  • loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript。

  • 或将内联图像转换为 data URL。

  • loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

1. webpack 加载图片-file-loader

  1. 引入图片，绑定挂载在页面上

    // 默认是，无法识别这个文件的
import lifecycle from './lifecycle.png';

var img = new Image();
img.src = lifecycle;

var app = document.getElementById('app');
app.appendChild(img)

  2. 局部安装 file-loader

    npm install file-loader --save-dev

  3. 配置 webpack.config.js 的 module

    const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  // 模式：mode？这个有什么作用？
  mode:'development',
  // 入口：__dirname :webpack.config.js的目录,src:src文件的index.js 文件开始打包
  entry: path.join(__dirname,'src','index.js'),
  // 出口：path，输出到那个目录下，filename：输出文件的名字!
  output:{
    path:path.join(__dirname,'dist'),
    filename:'bundle.js'
  },
  plugins:[
      new HtmlWebpackPlugin({
        // 指定生成文件的路径
        template:path.join(__dirname,'src','index.html'),
        // 指定生成文件的名字
        filename: 'index.html'
      }),
      // 清除上一打包 dist
      new CleanWebpackPlugin()
  ],
  module:{
    rules:[
      {
        test:/.png|jpg|gif$/,
        // use: 'file-loader'
        // 保持图片名打包前后一致
        use:{
          loader:'file-loader',
          options:{
            // 占位符： placeholder [name]  & [hash]
            name:`[name]_[hash].[ext]`
          }
        }
      }
    ]
  }
}

  4. 重新打包 npm run build

  5. 结果：

    image-20211028170658652

    image-20211028170620261

2. webpack 加载图片-url-loader

修改配置文件即可：将 file-loader —》改成 url-loader

就没有 图片的文件了，图片都转成 url 形式

// CommonJS语法

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  // 模式：mode？这个有什么作用？
  mode:'development',
  // 入口：__dirname :webpack.config.js的目录,src:src文件的index.js 文件开始打包
  entry: path.join(__dirname,'src','index.js'),
  // 出口：path，输出到那个目录下，filename：输出文件的名字!
  output:{
    path:path.join(__dirname,'dist'),
    filename:'bundle.js'
  },
  plugins:[
      new HtmlWebpackPlugin({
        // 指定生成文件的路径
        template:path.join(__dirname,'src','index.html'),
        // 指定生成文件的名字
        filename: 'index.html'
      }),
      // 清除上一打包 dist
      new CleanWebpackPlugin()
  ],
  module:{
    rules:[
      {
        test:/.png$/,
        // use: 'file-loader'
        // 保持图片名打包前后一致
        use:{
          loader:'url-loader',
          options:{
            // 占位符： placeholder [name]  & [hash]
            name:`[name]_[hash].[ext]`,
            // 指定 图片的存放位置
            outputPath:'images/'
          }
        }
      }
    ]
  }
}

image-20211028200247860

image-20211028200213504

3.webpack 加载图片-file+url-loader并用

  • 使用 url-loader 打包图片：

    好处： dist 少了 .jpg 图片文件 ，就减少了一次图片 HTTP请求

    **弊端：**页面加载，js加载完毕图片 -> bundle.js (base64) 图片过大，会导致bundle.js 过大，最终导致页面加载完毕时间很长，出现空白页面。

合理的处理方式：

  • 图片只有 1、2kb 时，使用url-loader（bundle.js-base64)
  • 图片很大时，就使用 file-loader，生成单独的 .jpg图片文件去发送额外的 HTTP请求，JS首次加载时间就很短，页面可以很快出来
  module:{
    rules:[
      {
        test:/.png$/,
        // use: 'file-loader'
        // 保持图片名打包前后一致
        use:{
          loader:'url-loader',
          options:{
            // 占位符： placeholder [name]  & [hash]
            name:`[name]_[hash].[ext]`,
            // 指定 图片的存放位置
            outputPath:'images/',
            // 单位：2 kb = 2048,50kb = 51200
            limit: 52000
          }
        }
      }
    ]
  }

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CuQh2CAQ-1635504669703)(C:/Users/13059/AppData/Roaming/Typora/typora-user-images/image-20211028201906467.png)]

image-20211028202019368

我嘞个去！牛奶项目根本就没有对图片区分打包

4.style-loader & css-loader打包样式 css
  • **style-loader：**将生成的css代码插入到header中
  • **css-loader：**根据.css文件的引用关系生成一段css代码
  • loader数组从下向上执行的！！！

  1. 安装 对应的 loader

    // 安装加载 css文件的
npm install --save-dev css-loader
// 安装加载 typescript文件的（将 ts转换成JS）
npm install --save-dev ts-loader
// 本次使用
npm install style-loader css-loader -save-dev

  2. 修改配置文件

      module:{
    rules:[
      {
        test:/.png$/,
        // use: 'file-loader'
        // 保持图片名打包前后一致
        use:{
          loader:'url-loader',
          options:{
            // 占位符： placeholder [name]  & [hash]
            name:`[name]_[hash].[ext]`,
            // 指定 图片的存放位置
            outputPath:'images/',
            // 单位：2 kb = 2048
            limit: 52000
          }
        }
      },
      // style|css-loader  
      {
        test: /.css$/,
        // loader 数组从下向上执行的  
        use: [
            // 将生成的css代码插入到header中
            'style-loader',
            // css-loader:根据.css文件的引用关系生成一段css代码
            'css-loader'
        ]
      }
    ]
  }
5.sass-loader&postcss-loader打包样式 scss
  • sass-loader： 引用scss的依赖关系
  • postcss-loader： 转换代码兼容浏览器设置
    1. 因为 scss 低版本的浏览器不一定支持，使用 postcss-loader解决这个问题.
    2. postcss-loader 需要 插件：autoprefixer
    3. 安装命令：npm install autoprefixer --save-dev

  1. 导入需要的 loader

    npm install sass sass-loader --save-dev
npm install postcss-loader --save-dev

  2. 配置文件 webpack.config.js

      module:{
    rules:[
      {
        test:/.png$/,
        // use: 'file-loader'
        // 保持图片名打包前后一致
        use:{
          loader:'url-loader',
          options:{
            // 占位符： placeholder [name]  & [hash]
            name:`[name]_[hash].[ext]`,
            // 指定 图片的存放位置
            outputPath:'images/',
            // 单位：2 kb = 2048
            limit: 52000
          }
        }
      },
      {
        test: /.scss$/,
        use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader'
        ]
      }
    ]
  }

  3. 配置 postcss-loader

    postcss.config.js

    module.exports = {
  plugins:[
      require('autoprefixer')
  ]
}

  4. 配置 package.json

    image-20211028224127850

6.CSS-loader 启动CSS模块化

  1. 存在的问题：

    • 在未使用 css模块化时，因为是全局引入的样式，会改变我并不想作用的元素

    image-20211029085203081

    image-20211029085259427

  2. 解决方式：利用 css-loader 实现 css 模块化

    梳理流程: 1.npm工具安装 loader，2.配置 webpackconfig.js 文件，3.将样式引入置于变量，使用模块化的类名引入方式

    1. 修改 webpack.config.js 的配置

        module:{
    rules:[
      {
        test:/.png$/,
        // use: 'file-loader'
        // 保持图片名打包前后一致
        use:{
          loader:'url-loader',
          options:{
            // 占位符： placeholder [name]  & [hash]
            name:`[name]_[hash].[ext]`,
            // 指定 图片的存放位置
            outputPath:'images/',
            // 单位：2 kb = 2048
            limit: 52000
          }
        }
      },
      {
        test: /.scss$/,
        use: [
            'style-loader',
            // 'css-loader',
             {
               loader:'css-loader',
               options:{
                 modules:true
               }
             },
            'postcss-loader',
            'sass-loader'
        ]
      }
    ]
  }

    2. 引入 css时，特性化说明 ${styleCss.lifecycle}

      // 默认是，无法识别这个文件的
import lifecycle from './lifecycle.png';

// 这个是全局的 scss引用
import styleCss from './index.scss';
import createLife from "./createLife.js";

// 执行这个函数
createLife();

var img = new Image();
img.src = lifecycle;
// 只给后面一个绑定样式-模块化样式
img.className += `${styleCss.lifecycle}`;

var app = document.getElementById('app');
app.appendChild(img)

    3. 结果展示和梳理

      image-20211029090446433

7.file-loader 打包字体图标
5.使用 Loader

有三种使用 loader 方式：

  1. 配置-Configuration

    module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览：

      module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

  2. 内联

    可以在 import 语句或任何等效于 “import” 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

    import Styles from 'style-loader!css-loader?modules!./styles.css';

    通过前置所有规则及使用 !，可以对应覆盖到配置中的任意 loader。

    选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

  3. CLI

    你也可以通过 CLI 使用 loader：

    这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader。

    webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
6. loader 特性
  • loader 支持链式传递。能够对资源使用流水线（pipeline）。一组链式的 loader 将按照相反的顺序执行。loader链式的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack所预期的 Javascript。
  • loader 可以是同步的，也可以是异步的。
  • loader 运行在 Node.js 中，执行能够执行的任何可能的操作。
  • loader 接收查询参数。用于对 loader 传递配置。
  • loader 也能够使用 options 对象进行配置。
  • 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
  • 插件(plugin)可以为 loader 带来更多特性。
  • loader 能够产生额外的任意文件。

loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多能力。 用户现在可以更加灵活地引入细粒度逻辑，例如压缩、打包、语言翻译和其他更多。

7.解析 loader

loader 遵循标准的模块解析。多数情况下，loader 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析。

loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。通常使用 npm 进行管理，但是也可以将自定义 loader 作为应用程序中的文件。按照约定，loader 通常被命名为 xxx-loader（例如 json-loader）。有关详细信息，请查看 如何编写 loader？。

4.插件-plugin

插件目的

  • 在于解决 loader 无法实现的其他事。

插件是 webpack 的支柱功能。webpack 自身也是构建于插件，你在 webpack 配置中用到的相同的插件系统之上！

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 构建过程开始！");
        });
    }
}

compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插件名称。建议为此使用一个常量，以便它可以在所有 hook 中复用。

1. plugin使用（dist目录下自动创建 index.html）

  1. npm install html-webpack-plugin --save-dev

    npm 工具安装 对应插件

  2. 配置 webpack.config.js

    const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({
    // 指定生成文件的路径
    template:path.join(__dirname,'src','index.html'),
      // 指定生成文件的名字  
      filename: 'index.html'
    })
  ]
};

module.exports = config;

  3. 最后再运行 npm run build 脚本的打包

    image-20211028192410116

    对比：

    image-20211028192533943

2. Node API

即便使用 Node API，用户也应该在配置中传入 plugins 属性。compiler.apply 并不是推荐的使用方式。

some-node-script.js

  const webpack = require('webpack'); //访问 webpack 运行时(runtime)
  const configuration = require('./webpack.config.js');

  let compiler = webpack(configuration);
  compiler.apply(new webpack.ProgressPlugin());

  compiler.run(function(err, stats) {
    // ...
  });

以上看到的示例和 webpack 自身运行时(runtime) 极其类似。wepback 源码中隐藏有大量使用示例，可以用在配置和脚本。有时间再去看了！！！

5.模式-mode

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

1.用法

只在配置中提供 mode 选项：

module.exports = {`` ``mode: ``'production'``};

或者从 CLI 参数中传递：

webpack --mode=production
2.支持字符串值：

1.development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-  new webpack.NamedModulesPlugin(),
-  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

2.production

会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

// webpack.production.config.js
module.exports = {
+ mode: 'production',
- plugins: [
-  new UglifyJsPlugin(/* ... */),
-  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-  new webpack.optimize.ModuleConcatenationPlugin(),
-  new webpack.NoEmitOnErrorsPlugin()
- ]
}

production模式下会启用UglifyJsPlugin插件（移除未使用的内容和文件压缩），分别用production和development打包，编译的区别：

1.development打包后，一些没有依赖的方法 变量 文件会保留，production则会移除。

2.production打包后，代码会进行压缩，比development的文件小。

6.配置-configuration
1. devtool: ‘eval-cheap-module-source-map’

用于线上代码出现错误情况，方便定位错误位置：cheap-module-source-map 这个配置错误更加全面

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  // devtool
  devtool:'',    
  // 模式：mode？这个有什么作用？
  mode:'development',
  // 入口：__dirname :webpack.config.js的目录,src:src文件的index.js 文件开始打包
  entry: path.join(__dirname,'src','index.js'),
  // 出口：path，输出到那个目录下，filename：输出文件的名字!
  output:{
    path:path.join(__dirname,'dist'),
    filename:'index.js'
  },
  plugins:[
      new HtmlWebpackPlugin({
        // 指定生成文件的路径
        template:path.join(__dirname,'src','index.html'),
        // 指定生成文件的名字
        filename: 'index.html'
      }),
      // 清除上一打包 dist
      new CleanWebpackPlugin()
  ],

}
2.WebpackDevServer

  1. 安装 WebpackDevServer

    npm install webpack-dev-server --save-dev

  2. 配置 webpack.config.js

      devServer:{
    port: 8000,
    static: path.join(__dirname,'dist')
  }

  3. 配置 package.json

     "scripts": {
    "build": "webpack", // 打包快捷命令
    "dev": "webpack-dev-server" // 运行快捷命令
  },

  4. 启动：npm run dev

    这样就可以自动更新了，原理：相对于将 dist放在内存中，每改变一次，更新一次 内存的 dist

    image-20211029104004616

3.WebpackDevServer请求转发

用于，开发环境的接口地址的使用，这样配置之后，使用相对路径，上线就不用改了

  1. index.js ：入口文件

    import axios from 'axios';

//axios.get('http:study.jspluplus.com/Yixiantong/getHomeDatas').then(({data}) =>{
//    console.log(data)
//})
axios.get('/Yixiantong/getHomeDatas').then(({data}) =>{
    console.log(data)
})

  2. 配置 devServer

    一旦碰上这个路径：’/Yixiantong’就转发到 target:‘http:study.jsplusplus.com’,

      devServer:{
    port: 8000,
    // static: path.join(__dirname,'dist'),
    contentBase:'./dist',
    proxy:{     
      '/Yixiantong':{
        target:'http:study.jsplusplus.com',
        changeOrigin:true
      }
    }
  }

  3. 剔除路径某字符

    image-20211029110600855

7.模块热替换-hot module replacement

提高开发调试的效率，其中css的css-loader封装了，可以直接使用 HMR热部署

而原始的 JS并没有，因此需要开发自己写，当然在Vue 中有这一部分功能

image-20211029111854922

image-20211029112352077

不加蔗糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack 之 publicPath
Luckyzhoufangbing的博客
06-06 486
（一）项目开发完上线，path路径都会换成cdn的域名前缀，这个时候就要使用publicPath了 在output输出的时候配置：以域名 static.test.cn 为例：在多页面的基础上修改 module.exports = { entry: entry, output: { filename: 'js/[name].[chunkhash].js', path: path.join(__dirname, 'dist'), publicPath: 'static.te
关于__webpack_public_path__的一些思考
哎咿呀
05-09 3087
前言：产品里有个困扰很久的bug，某处图片引用使用的require('xxxx')的方式，线上环境没问题，图片正常加载显示。当被第三方引用后，发现图片不能加载，引用路径上出现protocol:host:port/path/NANimg/xxxx.png的奇怪信息。 问题与webpack的publicPath配置有关系，conf文件中使用url-loader ...
webpack配置路径别名（Vue）
m0_46165586的博客
05-15 807
查看项目中是否存在vue.config.js文件，不存在就在根目录下面创建该文件。
Webpack—配置路径别名
伯恩大帝的博客
12-12 1482
...
解决报错：驼峰命名导致的报错
m0_67430478的博客
06-07 1246
解决驼峰命名问题的报错
前端百题——开拓思路之三种方式实现字符串转驼峰
开源世界
06-28 863
相信大家都遇到过这样一个问题：将’-'连接的字符串转换为驼峰形式，例如将hello-word转换为helloWorld。这个问题虽然简单，但是如果仅仅用一种方案进行解决不能体现 出自己的能力，如果要想表现的与众不同，就要用多种方式解决。下面就通过三种方式解决该问题。 22.1 方式一 首先来看看第一种方案，是在字符串维度进行操作，其思想可以归结为以下几个步骤： 按照’-'进行分割； 从第二个元素开始进行遍历，将每个元素的首字母变为大写的； 将数组中的元素进行连接 // 操作字符串数组 function tr
webpack实用小功能介绍
08-28
主要介绍了webpack实用小功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
webpack4从0搭建组件库的实现
01-22
代码分离 代码分离方法有三种： 入口起点：使用 entry 配置手动地分离代码。...在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 “resource hint(资源提示)”，来告知浏览器： pre
微信小游戏合集 开发工具自带webpack
最新发布
03-01
微信小游戏 微信开发工具自带webpack， 这里webpack用于H5调试 愤怒的小鸟 贪吃蛇 飞机大战 坦克大战 消消乐 星图 大家来找茬
Webpack 从零入门到工程化实战.rar
12-29
在“Webpack 从零入门到工程化实战”中，你将学习到以下关键知识点： 1. **Webpack 基本概念**： - **Entry（入口）**：Webpack 构建的起点，定义了项目中的主文件。 - **Output（输出）**：配置构建后的文件路径...
webpack常用配置总览(小结)
12-13
看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接，写在一个文件下更能有全局感受，更能理解各个属性中间的关系，重点要关注entry,output,resolve,module, plugins几部分 配置示例 这并...
js webpack 配置路径_javascript – 在运行时设置webpack公共路径的示例
weixin_34665386的博客
12-23 251
近两年后没有任何改变.在运行时找到为webpack设置公共路径的示例仍然令人惊讶地困难.先决条件> webpack 4.5.0>一个足以利用代码拆分的应用程序为简单起见,假设我们的html位于index.html,app入口点为app.js一个有效的例子的index.htmlwindow.resourceBasePath = '/path/to/scripts/on/server/';...
修改webpack的publicPath为动态设置以适配公司活动平台
letterTiger的博客
02-05 5790
背景： 我们需要将React开发的应用部署到一个活动搭建平台上，这意味我们只需要上传源码，没有搭建服务器的环节，没有配置Nginx的环节。具体步骤就是在该平台新建一个活动，然后将自己的源码传到这个活动下，然后打开这个活动提供的地址，然后就能够看到页面。 我们上传的js文件main.js会得到一个js/main.js的路径，然后将这个路径放到html的script标签的src属性上即可。main.c...
Webpack摘抄
weixin_44767973的博客
01-16 1185
webpack的使用及配置
前端一定要知道的 webpack 配置基础知识
我的专栏
06-13 818
一定要知道的 webpack 配置基础知识
webpack入门学习
m0_37671585的博客
04-24 486
概念 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 入口(entry) 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为...
【webpack】利用webpack动态修改publicpath
不忘初心，坚定道路！
07-04 1967
一般情况，我们会在构建时使用env来构建出不同publicpath的应用，但是如果不让你使用env（比如没法区分环境变量），我最近遇到了这个问题，分享下解决方法。
__webpack_public_path__动态配置路径
热门推荐
qq_37976966的博客
05-15 1万+
问题： 前端采用的是vue + webpack,项目部署时会动态配置一个相对路径，页面的js，css,img都是通过这种方式引入，但是publicPath是写死的（并没有根据后台传入的url动态去匹配）就会导致页面引用的js，css，img报404的错误 Output Output用于配置打包输出的文件，包括输出文件的文件名、输出路径、静态资源 Eg: Module.exports = { Fil...
webpack4介绍与总结
weixin_34051201的博客
08-05 319
由于web应用扩展地得极其迅猛，前端技术也是日新月异，前端的苦不是有多难学，而是我刚学完，这东西就被淘汰了（手动哭脸）。框架方面我们有vue、react、angular，我们需要写vue单文件，也需要写jsx语法；js方面我们有Typescript、es6(7、8、9)，现在是每年一个小版本的迭代，语法也是在不断更新和淘汰；模块方面我们有...
使用webpack5从0配置eslint
06-02
接下来，你需要在你的webpack配置文件中添加以下loader配置： ```javascript module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader', 'eslint-loader'], }, ], }, ``` 然后...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值