Webpack模块加载器

今天药忘吃喽~ 2021-10-25 14:40 402阅读 0赞

![328599-20170418094918681-1031600624.jpg][]

**一、介绍**

Webpack是德国开发者 Tobias Koppers 开发的模块加载器，它能把所有的资源文  
件（JS、JSX、CSS、CoffeeScript、Less、Sass、Image等）都作为模块来使用和处理。

作为一个模块打包工具，主要功能是打包资源文件并整合到一个包中，我们在开发时，只需  
要引用一个包文件，就能加载预先设计好的模块功能。

**二、安装**

不同文件类型的资源，Webpack有对应的模块loader，ES6语法转换用的是babel-loader，  
dataUrl用的是url-loader，样式用的style、css-loader。  
loader列表：http://webpack.github.io/docs/list-of-loaders.html

# 安装webpack
    npm install webpack
     
    # 使用babel、css、dataUrl模块
    npm install style-loader css-loader url-loader babel-loader babel-preset-es2015
    
    # 创建webpack.config.js文件
    touch webpack.config.js

安装Webpack之后，可以使用webpack命令行工具，它默认读取当前目录下的webpack.config.js配置文件。

**三、基本使用**

webpack声明加载babel、style、css、url的loader之后会读取main.js所有模块，并把打包  
后的结果输出到bundle.js文件中。

module.exports = {
      // 读取main.js文件中引用的所有模块
      entry: './main.js',
      // 执行打包后输出的文件
      output: {
        filename: 'bundle.js'
      },
      // 加载模块
      module: {
        loaders: [
          // 匹配所有js文件，用babel工具识别ES6代码转换成ES5
          { test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015']} }, // 匹配所有css文件, 用style和css工具解析 { test: /\.css$/, loader: 'style-loader!css-loader' }, // 匹配所有png文件，解析成dataUrl格式 { test: /\.(png|jpg)$/, loader: 'url-loader'} // inline base64 URLs for <=8k images, direct URLs for the rest  ] } };

创建五个资源文件，分别写入  
1. main.js  
2. js/console-01.js  
3. js/console-02.js  
4. css/index.css  
5. images/3.jpg

// main.js - 加载模块
    // --------------------------------------------
    require('./js/console-01.js');
    require('./js/console-02.js');
    require('./css/index.css');
    
    // 读取图片模块，并输出到body中
    var img = document.createElement('img');
    img.src = require('./images/react.jpg');
    document.body.appendChild(img);
    // --------------------------------------------
    
    // JS - console-01.js
    console.log('console 01'); // JS - ES6 - console-02.js for (let i = 2; i <= 10; i++) { console.log('console 02'); } // CSS样式模块 body { background: #ccc; }

运行webpack命令，它会读取main.js文件，并把main.js依赖的模块进行打包处理，最终输出到bundle.js文件下。

# 运行webpack命令
    webpack
    
    # 输出结果
    ------------------------------------------------------
    Hash: d9ca67a5753768b7c625
    Version: webpack 1.12.11
    Time: 52ms
    Asset Size Chunks Chunk Names
    bundle.js 24 kB 0 [emitted] main
    + 8 hidden modules
    ------------------------------------------------------

创建一个index.html文件，并引用bundle.js打开浏览器后

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <script src="./bundle.js"></script>
    </body>
    </html>

bundle.js文件包含了 CSS样式加载、图片dataUrl、JS 的合并打包处理。  
![328599-20170418095936165-1506625268.jpg][]

**四、哪些项目用到Webpack**  
1. React（JSX）  
2. Vue （.vue）  
3. Ant Design （淘宝Ant全组件）  
  
**五、哪些项目适合用Webpack**  
1. 单页应用 SPA （Single Page Application）  
2. 需要把资源文件整理成一个文件包的项目  
3. 用到ES6和JSX项目  
4. 可以考虑代替Gulp、Grunt等工具  
  
参考资料：  
[http://webpack.github.io/][http_webpack.github.io]  
[https://github.com/webpack][https_github.com_webpack]  
[http://segmentfault.com/a/1190000002551952][http_segmentfault.com_a_1190000002551952]

转载于:https://www.cnblogs.com/wubaiqing/p/6726389.html

[328599-20170418094918681-1031600624.jpg]: /images/20211025/8885365f314247a9bb603883f7c48362.png
[328599-20170418095936165-1506625268.jpg]: /images/20211025/7793f9410cf04962932a24010d5ef383.png
[http_webpack.github.io]: http://webpack.github.io/
[https_github.com_webpack]: https://github.com/webpack
[http_segmentfault.com_a_1190000002551952]: http://segmentfault.com/a/1190000002551952