【前端】Webpack使用总结

最新推荐文章于 2024-05-11 08:35:02 发布

87now

最新推荐文章于 2024-05-11 08:35:02 发布

阅读量519

点赞数

分类专栏：前端文章标签： webpack

本文链接：https://blog.csdn.net/ican87/article/details/81154470

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、Web资源分类
（1）静态web资源：HTML
在静态Web程序中，客户端使用Web浏览器（IE、FireFox等）经过网络(Network)连接到服务器上，使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面，所有的请求交给Web服务器，之后WEB服务器根据用户的需要，从文件系统（存放了所有静态页面的磁盘）取出内容。之后通过Web服务器返回给客户端，客户端接收到内容之后经过浏览器渲染解析，得到显示的效果。静态web无法连接数据库。
（2）动态web资源：JSP、ASP、PHP
如果客户端请求的是动态资源（*.jsp、*.asp/*.aspx、*.php），则先将请求转交给WEB Container(WEB容器)，在WEB Container中连接数据库，从数据库中取出数据等一系列操作后动态拼凑页面的展示内容，拼凑页面的展示内容后，把所有的展示内容交给WEB服务器，之后通过WEB服务器将内容发送回客户端浏览器进行解析执行。

2、Webpack认识
Webpack 是一个前端资源打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。注意：webpack 自身只理解 JavaScript。

3、Webpack优势
webpack 最重要的功能就是资源管理。
在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理这些 web 资源，如样式文件（例如 .css, .less, .sass），图片（例如 .png, .jpg, .svg），字体（例如 .woff, .woff2, .eot）和数据（例如 .json, .xml, .csv）等，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。
而 webpack 从 entry(入口) 开始，访问应用程序，并动态打包(dynamically bundle)所有依赖项。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，这可以避免打包未使用的模块。

4、Webpack配置属性
（1）entry入口
入口起点(entry point)指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
webpack.config.js文件：

module.exports = {
  entry: './path/to/my/entry/file.js'
};

（2）output出口
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
webpack.config.js文件：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

（3）Loader加载器
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。
webpack.config.js文件：

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

（4）plugins插件
plugins用于解决 Loader 无法解决的问题，它是 Loader 的辅助。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
webpack.config.js文件：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

5、Webpack使用demo
（1）创建app/runoob1.js 文件

document.write("It works.");

（2）创建app/index.html 文件

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

（3）使用 webpack 命令来打包

webpack runoob1.js bundle.js

（4）执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./runoob1.js 29 bytes {0} [built]

（5）在浏览器中打开 index.html，输出结果如下：

It works.

更多参考：

https://www.cnblogs.com/jingmoxukong/p/7009462.html
http://www.runoob.com/w3cnote/webpack-tutorial.html
https://webpack.docschina.org/concepts/
https://segmentfault.com/a/1190000006178770

87now

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】Webpack使用总结

1、Web资源分类（1）静态web资源：HTML在静态Web程序中，客户端使用Web浏览器（IE、FireFox等）经过网络(Network)连接到服务器上，使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面，所有的请求交给Web服务器，之后WEB服务器根据用户的需要，从文件系统（存放了所有静态页面的磁盘）取出内容。之后通过Web服务器返回给客户端，客户端接收到内...
复制链接

扫一扫