AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Webpack 资源管理

2017-11-15 1312
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

 提示：

  1. 版本问题

本文基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大改变。所以，如果你的项目中已使用了 webpack 1.x ，本教程的示例将不适用，请慎重。

如果铁了心要升级 webpack ，请参考 webpack 官方文档 - 从 v1 迁移到 v2

  1. 阅读建议

阅读本文前，建议先阅读 Webpack 概念 。

webpack 的优势

webpack 最重要的功能就是资源管理。

JavaScript 世界已有好几个有名的资源管理工具，webpack 有什么独到之处呢？

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理这些 web 资源，如样式文件（例如 .css, .less, .sass），图片（例如 .png, .jpg, .svg），字体（例如 .woff, .woff2, .eot）和数据（例如 .json, .xml, .csv）等，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。

而 webpack 从 entry(入口) 开始，访问应用程序，并动态打包(dynamically bundle)所有依赖项。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，这可以避免打包未使用的模块。

Loader

Loader(加载器) 用于对模块的源代码进行转换。

使用加载器一般遵循几步：

  1. 安装加载器
  2. 配置 Loader
  3. 引用资源文件

安装加载器

根据需要加载的资源文件，选择下载对应的加载器。

$ npm install --save-dev css-loader

更多 webpack 可用Loader 请查看：webpack loaders

配置 Loader

​️ 注意：

webpack 2.x 版本的 Loader 配置和 webpack 1.x 版本差别很大。

Loader 在 webpack.config.js 文件的 module 属性中配置。

资源类型对应单一加载器

module: {
  rules: [
    {test: /\.css$/, loader: 'css-loader'}
  ]
},

资源类型对应多个加载器

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }
  ]
},

加载器含配置选项

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

引用资源文件

完成上两步后，就可以在 JavaScript 中使用 import ，require 关键字引用相应类型资源文件。

import './index.css';
require('./index.css');

Plugin

Plugin(插件) 用于解决 Loader 无法解决的问题，它是 Loader 的辅助。

由于 plugin 可以携带参数/选项，你必须在 wepback 配置中，向 plugins 属性传入 new 实例。

安装插件

webpack 自身包含了一些常用插件，你可以通过 webpack 来引用。除此之外的插件，使用前需要安装

$ npm install --save-dev html-webpack-plugin OpenBrowserPlugin

更多 webpack Plugins 可以查看： webpack plugins

配置 Plugin

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  // 附加插件列表
  plugins: [
    // 压缩 js 插件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),

    // 用于简化 HTML 文件（index.html）的创建，提供访问 bundle 的服务。
    new HtmlWebpackPlugin({
      title: "react-step-by-step",
      template: "./index.html"
    }),

    // 自动打开浏览器
    new OpenBrowserPlugin({
      url: "http://localhost:8080"
    })
  ]
};

加载资源专题

加载 React

很多浏览器并不识别 React 语法，为了让浏览器支持，你需要使用 babel-loader 解释器来转义 React 语法为普通的 Javascript 语法。

️ 注意：

官方推荐 babel-loader 和 webpack 的对应版本

webpack 1.x | babel-loader <= 6.x

webpack 2.x | babel-loader >= 7.x （推荐）（^6.2.10 也可以运行，但会有不赞成的警告(deprecation warnings)）

首先，安装需要使用的库：

$ npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react

babel-preset-xxx 表示你希望转义的语法。

webpack.config.js 中的模块配置如下：

// 关于模块配置
module: {

  // 模块规则（配置 loader、解析器等选项）
  rules: [
    // 这里是匹配条件，每个选项都接收一个正则表达式或字符串
    // test 和 include 具有相同的作用，都是必须匹配选项
    // exclude 是必不匹配选项（优先于 test 和 include）
    // 最佳实践：
    // - 只在 test 和 文件名匹配 中使用正则表达式
    // - 在 include 和 exclude 中使用绝对路径数组
    // - 尽量避免 exclude，更倾向于使用 include
    {
      // 语义解释器，将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法
      test: /\.jsx?$/,
      include: path.resolve(__dirname, "app"),

      // 应该应用的 loader，它相对上下文解析
      // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
      // 查看 webpack 1 升级指南。
      loader: "babel-loader",

      // loader 的可选项
      options: {
        presets: ["es2015", "react"]
      },
    },
  ]
},

​ 示例DEMO04： (DEMO / SOURCE)

加载 CSS

为了从 JavaScript 模块中 import 一个 CSS 文件，你只需要在 module 中安装并添加 style-loader 和 css-loader 。

$ npm install --save-dev style-loader css-loader

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          'style-loader'
        ]
      }
    ]
  },
  //...
}

好了，此时你就可以在代码中通过 import './style.css' 的方式引入 CSS 文件。

其余，加载 less，sass 等样式文件也是大同小异，不一一细说。

 示例DEMO06： (DEMO / SOURCE)

加载图片

如何打包、加载图片呢？你可以使用 file-loader来指定要加载的图片。

$ npm install --save-dev file-loader

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  //...
}

然后，你可以通过 import imgBig from './lion.png' 的方式引入图片。例：

import React from 'react';
import imgBig from './lion.png';

class Welcome extends React.PureComponent {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <img src={imgBig} />
      </div>
    );
  }
}
export default Welcome;

压缩图片

这还不算完，日常开发中，经常会遇到有些图片文件过大的问题，这会影响你的 app 的加载速度。webpack 提供了压缩图片的方法帮你解决图片大的问题。

首先，你需要安装 image-webpack-loader

$ npm i --save-dev image-webpack-loader

接下来，修改 webpack.config.js

{
  // 图片加载 + 图片压缩
  test: /\.(png|svg|jpg|gif)$/,
  loaders: [
    "file-loader",
    {
      loader: "image-webpack-loader",
      query: {
        progressive: true,
        pngquant: {
          quality: "65-90",
          speed: 4
        }
      }
    }
  ]
}

 示例DEMO07： (DEMO / SOURCE)

加载字体

那么，像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体：

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  //...
}

一切就绪后，你可以在 css 文件中这样引入字体：

@font-face {
  font-family: 'MyDiyFont';
  src: url('./font/iconfont.eot'); /* IE9*/
  src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./font/iconfont.woff') format('woff'), /* chrome、firefox */
  url('./font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('./font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

h1 {
  font-family: 'MyDiyFont';
  font-size: 24px;
}

p {
  font-family: 'MyDiyFont';
  font-size: 18px;
}

然后，相对路径，会被替换为构建目录中的完整路径/文件名。


本文转自静默虚空博客园博客，原文链接：http://www.cnblogs.com/jingmoxukong/p/7009462.html，如需转载请自行联系原作者

文章标签：
资源管理
前端开发
JavaScript
Web App开发
索引
iOS开发
关键词：
Webpack资源管理
文艺小青年
目录
相关文章
快乐阿超
|
XML JSON 前端开发
webpack资源管理
webpack资源管理
快乐阿超
43 1
webpack资源管理
技术小甜
|
Web App开发 JavaScript 前端开发
Webpack 资源管理
技术小甜
1441 0
dufadayang
|
3月前
|
JavaScript
webpack打包TS
webpack打包TS
dufadayang
138 60
我是快乐的嘟嘟
|
2月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
我是快乐的嘟嘟
48 10
我是快乐的嘟嘟
|
2月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
我是快乐的嘟嘟
68 9
有路有乔-六月
|
2月前
|
缓存 前端开发 JavaScript
深入了解Webpack：模块打包的革命
【10月更文挑战第11天】深入了解Webpack：模块打包的革命
有路有乔-六月
35 1
六卿
|
3月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境，包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件，并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
六卿
159 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
一缕微风绕指柔
|
2月前
|
缓存 前端开发 JavaScript
Webpack技术深度解析：模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析：模块打包与性能优化
一缕微风绕指柔
43 0
代码bug生产队
|
2月前
|
前端开发 JavaScript 开发者
深入了解Webpack：现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack：现代JavaScript应用的打包利器
代码bug生产队
31 0
dufadayang
|
3月前
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
dufadayang
26 1

热门文章

最新文章

  • 1
    webpack window 使用sass来编译css样式
  • 2
    vue之webpack打包原理和用法详解
  • 3
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 4
    wp2vite的妙用，让webpack项目支持vite
  • 5
    2.2.3 使用webpack loader
  • 6
    你真的理解 Webpack？请回答下列问题
  • 7
    webpack指南-webpack介绍-代码分割 - CSS
  • 8
    掘金课程《Webpack5 核心原理与应用实践》学习笔记
  • 9
    基于React、Redux、Webpack 和 React-Router的项目模板。 #89
  • 10
    webpack深入浅出（二）| 小册免费学
  • 1
    Vite和Webpack的区别是什么
    65
  • 2
    js开发：请解释什么是Webpack，以及它在项目中的作用。
    64
  • 3
    webpack如何设置devServer启动项目为https协议
    1346
  • 4
    webpack成长指北第9章---webpack如何对icon字体进行打包
    136
  • 5
    webpack成长指北第8章---webpack的CSS Modules打包
    76
  • 6
    webpack成长指北第7章---webpack的css\less\scss样式打包
    105
  • 7
    webpack成长指北第6章---webpack的图片引入
    63
  • 8
    webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
    63
  • 9
    webpack成长指北第2章---安装webpack的正确姿势
    58
  • 10
    深入理解前端性能优化中的Webpack Tree Shaking
    86

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • Hadoop 分布式资源管理框架 YARN
  • 批量云资源管理与自动化运维
  • 企业Web常用架构LAMP-LNMP实战

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • Web应用系统性能优化
  • 从Web到Cloud App——YunOS Web App 开发经验分享

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。