webpack学习记录(二)-管理资源

在 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,那么项目应该能够良好运行。

相关文章