Webpack整合实例及优化

布满荆棘的人生 2022-06-06 12:54 157阅读 0赞

本文章之前有写过关于 webpack 中如何使用 hash 和 devserver 的例子，有需要的可以去查看一下：  
如何使用 Hash: [http://blog.csdn.net/hsl0530hsl/article/details/78474026][http_blog.csdn.net_hsl0530hsl_article_details_78474026]  
如何使用 Server: [http://blog.csdn.net/hsl0530hsl/article/details/78419693][http_blog.csdn.net_hsl0530hsl_article_details_78419693]

本文主要记录一下，webpack 的一个完整实例，以及一些相关的优化。

首先贴一个整体的结构图：  
![这里写图片描述][SouthEast]

每个文件的具体内容，如下作展示：

1、package.json

{ 
      "name": "webpack",
      "version": "1.0.0",
      "description": "This is just a test",
      "main": "dist/bundle.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack",
        "server": "webpack-dev-server --open"
      },
      "keywords": [
        "webpack",
        "dev-server"
      ],
      "author": "slHuang",
      "license": "ISC",
      "devDependencies": { 
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.4",
        "style-loader": "^0.19.0",
        "css-loader": "^0.28.7",
        "postcss-loader": "^2.0.8",
        "autoprefixer": "^7.1.6",
        "babel-core": "^6.26.0",
        "babel-cli": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-react": "^6.24.1",
        "babel-preset-env": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "babel-plugin-transform-runtime": "^6.23.0",
        "extract-text-webpack-plugin": "^3.0.2"
      },
      "dependencies": { 
        "babel-runtime": "^6.26.0"
      }
    }

postcss-loader 与 autoprefixer 一起使用可以给 css 自动添加前缀。  
style-loader 将 JS 字符串生成为 style 节点。  
css-loader 将 CSS 转化成 CommonJS 模块，注意使用 options 添加 module 配置。  
html-webpack-plugin 根据模板html生成引入js后的html  
babel-core 和 babel-preset-env 用来处理 js 的转换和压缩  
babel-preset-react 编译JSX  
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象  
babel-runtime解决 Babel不转换新API的问题,用以提供编译模块的工具函数

使用babel-runtime需要额外安装babel-runtime和babel-plugin-transform-runtime依赖包，然后在config配置文件中，添加如下配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]

关于babel-runtime和babel-polyfill的一些区别，请参考如下文章：  
[https://www.jianshu.com/p/73ba084795ce][https_www.jianshu.com_p_73ba084795ce]

使用 npm install 将需要的插件安装好。具体如何安装以及开发环境的介绍，可以查看本人的其他文章。

2、index.temp.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test webpack</title>
    </head>
    <body>
    
        <h4>This is just a test of the webpack!</h4>
    
    </body>
    </html>

这里只需要写一个单纯的 html 模板就可以了,不用引进 css 或是 js 相关的文件,后面 webpack 会自动引进这些文件的。另外页面的一些其他内容(页面元素)可以通过 js 动态生成。

3、webpack.config.js

处理 babel-loader 很慢的问题：

> 有以下几点可以优化这个处理速度：  
> 1、确保转译尽可能少的文件。你可能使用 /.jsKaTeX parse error: Can't use function '\\.' in math mode at position 77: …式尽量少的匹配文件。比如：\`/\\̲.̲js/\*\\.js/\`  
> 2、使用 exclude 排除 node\_modules 下的 js 文件  
> 3、使用 cacheDirectory 选项，将数据缓存在内存中，没有改变的文件将会从内存中读取  
> 4、引入 babel-plugin-transform-runtime 插件作为一个独立模块，来避免重复引入。‘transform-runtime’ 插件告诉 babel 要引用 runtime 来代替注入。(babel 在每个文件都插入了辅助代码，使代码体积过大！比如对一些公共方法使用了非常小的辅助代码\_extend, 默认情况下会被添加到每一个需要它的文件中)
> 
> > 注意： 你必须执行 npm install babel-plugin-transform-runtime --save-dev 来把它包含到你的项目中，也要使用 npm install babel-runtime --save 把 babel-runtime 安装为一个依赖。

优化插件:  
OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID  
ExtractTextPlugin：分离CSS和JS文件  
UglifyJsPlugin：压缩JS代码；

4、variables.js

let val = { values: "This is my first div added!"};
    
    export default val;

5、requireAddDiv.js

import val from "./variables";
    
    require("../css/index.css");
    
    const div = document.createElement("div");
    div.innerHTML = val.values;
    document.body.appendChild(div);

6、index.css

body { 
        background-color: green;
        color: blue;
    }

最终页面的效果图如下：  
![这里写图片描述][SouthEast 1]

[http_blog.csdn.net_hsl0530hsl_article_details_78474026]: http://blog.csdn.net/hsl0530hsl/article/details/78474026
[http_blog.csdn.net_hsl0530hsl_article_details_78419693]: http://blog.csdn.net/hsl0530hsl/article/details/78419693
[SouthEast]: /images/20220606/69665f60933c42c4960b9c9d19bbedf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20220606/aaf60f44d4b147baadd1a1496eeb4c39.png
[https_www.jianshu.com_p_73ba084795ce]: https://www.jianshu.com/p/73ba084795ce
[SouthEast 1]: /images/20220606/88231395698b47f78d75668216b29426.png