webpack学习记录-管理资源

Posted 2021-02-04 yanggl

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。同样方式也被用于 javascript 模块，但是，像 webpack 这样的工具，将动态打包(dynamically bundle)所有依赖项（创建所谓的依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，我们将避免打包未使用的模块。

webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了这个设置过程。

以上是官网的解释，我简单的理解就是webpack是可以通过依赖动态管理你的资源的，在模块化的开发中，可以根据他们自身的依赖项，将需要的依赖打包。

那么要根据依赖动态管理资源，就需要我们对资源的加载进行管理，就需要进行相关配置，在webpack.config.js中进行module配置

const path =require('path');
module.exports={
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                // 加载css  安装style-loader css-loader 
                // npm install --save-dev style-loader css-loader
                test:/.css$/,   
                use:[
                'style-loader',
                'css-loader'
                ]
            },
            {
                // 加载图片  安装file-loader
                // npm install --save-dev file-loader
                test:/.(png|svg|jpg|gif)$/,
                use:[
                'file-loader'
                ]
            }，
            {
                //加载字体文件
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                'file-loader'
                ]
      }
        ]
    }
}

通过以上方式，可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起。这种配置方式会使你的代码更具备可移植性，因为现有的统一放置的方式会造成所有资源紧密耦合在一起。假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。只要你已经安装了任何扩展依赖(external dependencies)，并且你已经在配置中定义过相同的 loader，那么项目应该能够良好运行。