【webpack】webpack之管理资源及管理输出

于 2019-03-20 21:32:44 发布
阅读量271 收藏
点赞数
分类专栏： webpack 文章标签： webpack 管理资源 管理输出
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39602178/article/details/88700587
版权

前言

本文将从进行管理资源和管理输出两方面进行记录，两部分都需要用到【webpack】webpack4基本的构建过程中的代码示例

管理资源

webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。

一、加载CSS

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

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

webpack.config.js

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
 +   module: {
 +     rules: [
 +       {
 +         test: /\.css$/,
 +         use: [
 +           'style-loader',
 +           'css-loader'
 +         ]
 +       }
 +     ]
 +   }
  };

2.尝试：

  • 在src目录下新建style.css
  • src/style.css
.hello {
	color: red;
}
  • src/index.js
  import _ from 'lodash';
+ import './style.css';

  function component() {
    var element = document.createElement('div');

    // lodash 是由当前 script 脚本 import 导入进来的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());
  • 运行npm run build，浏览器打开index.html可以看到文本变成红色。

二、加载图片

1.使用 file-loader，我们可以将图片混合到 CSS 中：

npm install --save-dev file-loader

webpack.config.js

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

2.尝试：

  • 在src目录下新增图片icon.jpg
  • src/index.js
  import _ from 'lodash';
  import './style.css';
+ import Icon from './icon.png';

  function component() {
    var element = document.createElement('div');

    // Lodash，现在由此脚本导入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

+   // 将图像添加到我们现有的 div。
+   var myIcon = new Image();
+   myIcon.src = Icon;
+
+   element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());
  • 运行npm run build，浏览器打开index.html可以文本和我们添加的图片。

合乎逻辑下一步是，压缩和优化你的图像。查看 image-webpack-loader 和 url-loader，以了解更多关于如果增强加载处理图片功能。

三、加载字体

file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体。

  • webpack.config.js
module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  • 在src目录下加入字体文件，如：my-font.woff
  • 通过在src/style.css加入@font-face声明引入
  • npm run build，打开index.html查看

4.加载数据

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。要导入 CSV、TSV 和 XML，可以使用 csv-loader 和 xml-loader。

npm install --save-dev csv-loader xml-loader
  • webpack.config.js，同样地，添加在module的rule中
{
	  test: /\.(csv|tsv)$/,
	   use: [
	     'csv-loader'
	   ]
 },
{
	   test: /\.xml$/,
	   use: [
	     'xml-loader'
	   ]
 }
以上是管理资源的部分，接下来是管理输出的部分，代码示例仍是管理资源前的。

管理输出

到目前为止，我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。

1.预先准备

  • 调整项目：
 webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules
  • 在src/print.js添加一些逻辑
export default function printMe() {
  console.log('I get called from print.js!');
}
  • 并且在 src/index.js 文件中使用这个函数：
import _ from 'lodash';
+ import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
+   var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+   btn.innerHTML = 'Click me and check the console!';
+   btn.onclick = printMe;
+
+   element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());
  • 更新 dist/index.html 文件，来为 webpack 分离入口做好准备：
<!doctype html>
  <html>
    <head>
-     <title>Asset Management</title>
+     <title>Output Management</title>
+     <script src="./print.bundle.js"></script>
    </head>
    <body>
-     <script src="./bundle.js"></script>
+     <script src="./app.bundle.js"></script>
    </body>
  </html>
  • 在webpack.config.js中调整配置。在 entry 添加 src/print.js 作为新的入口起点（print），然后修改 output，以便根据入口起点名称动态生成 bundle 名称：
const path = require('path');

module.exports = {
-   entry: './src/index.js',
+   entry: {
+     app: './src/index.js',
+     print: './src/print.js'
+   },
    output: {
-     filename: 'bundle.js',
+     filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
 };
  • 执行npm run build，得到的结果如下：

Hash: 64ea4d8e1666aa240e2a
Version: webpack 4.29.6
Time: 3993ms
Built at: 2019-03-20 21:03:00
Asset Size Chunks Chunk Names
app.bundle.js 70.6 KiB 0, 1 [emitted] app
print.bundle.js 1.02 KiB 1 [emitted] print
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
[0] ./src/print.js 85 bytes {0} {1} [built]
[2] ./src/index.js 487 bytes {0} [built]
[3] (webpack)/buildin/global.js 472 bytes {0} [built]
[4] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module

抛出疑问：当我们改变了入口起点的名称，会在dist文件生成一个新的js文件，但index.html引用的文件仍是原来的那个。所以，我们需要引入HtmlWebpackPlugin来解决这个问题。

2.设定HtmlWebpackPlugin

  • 安装插件
npm install --save-dev html-webpack-plugin
  • 调整webpack.config.js 文件：
 const path = require('path');
 + const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
 +   plugins: [
 +     new HtmlWebpackPlugin({
 +       title: 'Output Management'
 +     })
 +   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
  • 执行npm run build。

HtmlWebpackPlugin会创建一个新的html文件来代替原本存在的html文件。

3.清理 /dist 文件夹

clean-webpack-plugin在每次构建前都会对dist文件进行清理，最后只生成用到的文件。

  • 安装clean-webpack-plugin
npm install clean-webpack-plugin --save-dev
  • 在webpack.config.js中进行配置
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
 + const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
 +     new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
  • 执行npm run build。出现如下错误：

clean-webpack-plugin only accepts an options object.

从clean-webpack-plugin
中看到的该插件的使用方法是不添加参数，故将new CleanWebpackPlugin(['dist'])中的参数去除，重新build，可以看到dist文件中的多余文件被清除。

参考文档

《webpack中文文档》

巴拉拉L
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值