本内容主要讲解“如何安装和使用 Webpack”，有兴趣的同学不妨看一看。本文介绍的方法简单、快速操作且实用。让我带你学习“如何安装和使用 Webpack”！n
Webpack 是一个后端资源加载/打包工具。它将静态分析模块的依赖关系，然后根据指定的规则生成相应的静态资源。n
Webpack 可以将多个静态资源 js、css 等转换为静态文件，从而减少页面请求。n
安装网络包n
在安装 Webpack 之前，您的本地环境需要支持节点.js。n
由于 npm 安装速度较慢，本教程使用天猫镜像及其命令 cnpm。n
安装 webpack：： 使用 cnpmn
cnpm install webpack -g
n
mkdir app
n在
app 目录中添加 runoob1.js 文件，代码如下：n
document.write("It works.");
n
n
我们使用 webpack 命令来打包它：n
webpack runoob1.js bundle.js
n
执行上述命令将编译 runoob1 .js 文件并生成一个捆绑.js文件，输出消息如下：n
Hash: a41c6217554e666594cbVersion: webpack 1.12.13Time: 50ms Asset Size Chunks Chunk Namesbundle.js 1.42 kB 0 [emitted] main [0] ./runoob1.js 29 bytes {0} [built]
n
创建第二个 JS 文件n
然后我们创建另一个 js 文件 runoob2 .js，代码如下：n
module.exports = "It works from runoob2.js.";
n
document.write(require("./runoob2.js"));
n
我们使用 webpack 命令来打包它：n
webpack runoob1.js bundle.js Hash: dcf55acff639ebfe1677Version: webpack 1.12.13Time: 52ms Asset Size Chunks Chunk Namesbundle.js 1.55 kB 0 [emitted] main [0] ./runoob1.js 41 bytes {0} [built] [1] ./runoob2.js 46 bytes {0} [built]
n
Webpack 根据模块依赖关系进行静态分析，此类文件（模块）包含在捆绑.js文件中。Webpack 为每个模块分配一个唯一的 ID，并通过此 ID 索引和访问模块。当页面启动时，首先执行 runoob1.js 中的代码，并在运行所需的模块时执行其他模块。n
装载 机n
Webpack 本身只能处理 JavaScript 模块，如果你想处理其他类型的文件，你需要使用加载器来转换它们。n
所以如果我们需要将 CSS 文件添加到应用程序中，我们需要使用 css-loader 和 style-loader，n
它们做两件不同的事情，css-loader 将遍历 CSS 文件，然后找到 url（） 表达式并处理它们，style-loader 会将原始 CSS 代码插入到页面中的样式标签中。n
然后我们使用以下命令安装 css-loader 和 style-loader（全局安装需要参数 -g）。n
cnpm install css-loader style-loader
n
执行上述命令后，将在当前目录中生成node_modules目录，该目录是 css-loader 和 style-loader 的安装目录。n
取出它并使用以下代码创建一个 style.css 文件：n
body { background: yellow;}
n
使用以下代码更改 runoob1.js 文件：n
require("!style-loader!css-loader!./style.css");document.write(require("./runoob2.js"));
n
我们使用 webpack 命令来打包它：n
webpack runoob1.js bundle.js Hash: a9ef45165f81c89a4363Version: webpack 1.12.13Time: 619ms Asset Size Chunks Chunk Namesbundle.js 11.8 kB 0 [emitted] main [0] ./runoob1.js 76 bytes {0} [built] [5] ./runoob2.js 46 bytes {0} [built] + 4 hidden modules
n
在浏览器中访问时，输出如下所示n
当需要 CSS 文件时，我们必须编写加载器前缀！style-loader！css-loader！，实际上我们可以根据模块类型（扩展名）手动绑定所需的加载器。组合 .js require（“！style-loader！css-loader！./style.css“） 到 require（”./style.css“）：n
runoob1.js 文件n
require("./style.css");document.write(require("./runoob2.js"));
n
在以下时间后执行：n
webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'
n
在浏览器中访问时webpack工具安装，输出如下所示n
配置文件n
使用以下代码创建一个 webpack.config .js文件：n
module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style-loader!css-loader" } ] }};
n
我们只需要执行 webpack 命令来生成捆绑.js文件：n
webpack Hash: 4fdefac099a5f36ff74bVersion: webpack 1.12.13Time: 576ms Asset Size Chunks Chunk Namesbundle.js 11.8 kB 0 [emitted] main [0] ./runoob1.js 65 bytes {0} [built] [5] ./runoob2.js 46 bytes {0} [built] + 4 hidden modules
n
在网络包之后n
命令执行后，默认加载当前目录的 webpack.config .js文件。n
插件n
该插件在 webpack 配置信息的插件选项手中指定，用于完成加载器无法完成的一些工作。n
Webpack 附带了一些插件，您可以通过 cnpm 安装一些插件。n
要使用外部插件，您需要使用以下命令安装它们：n
cnpm install webpack --save-dev
n
例如，我们可以安装一个外部的 BannerPlugin 插件，在文件的腹部输出一些注释信息。n
使用以下代码更改 webpack.config .js：n
var webpack=require('webpack'); module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style-loader!css-loader" } ] }, plugins:[ new webpack.BannerPlugin('菜鸟教程 webpack 实例') ]};
n
运行后：n
webpack
n
打开捆绑包.js，您可以看到我们指定的注释信息出现在文件的颈部。n
开发环境n
随着项目越来越大，webpack 的编译时间会变长，可以使用参数使编译后的输出有进度和颜色。n
webpack --progress --colors
n
如果不想每次更改模块时都重新编译，可以启动窃听模式。启用窃听模式后，未更改的模块在编译后会缓存在显存中，并且不会每次都重新编译，因此窃听模式的整体速率非常快。n
webpack --progress --colors --watch
n
事实上，我们可以使用 webpack-dev-servern
开发服务，这样我们就可以通过 localhost：8080 启动一个快速的静态资源 Web 服务器，并且会在窃听模式下手动运行 Webpack，在浏览器中打开：8080/或者：8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出。通过 socket.io 服务，可以实时窃听它们并手动刷新页面。n
# 安装cnpm install webpack-dev-server -g # 运行webpack-dev-server --progress --colors
n
在浏览器中打开：8080/输出结果n
在这一点上，相信大家对“如何安装和使用 Webpack”有了更深入的了解，不妨在实践中去做！这里是本站的网站webpack工具安装，更多相关内容可以步入相关渠道查询，关注我们，继续学习！n","to":"zh-Hans","sentLen":{"srcSentLen":[34,111,81,59,58,141,49,115,19,80,103,32,10,20,31,10,77,10,74,10,45,10,135,10,67,27,71,10,55,10,45,10,58,126,96,121,10,145,98,201,122,10,177,68,11,55,11,45,11,58,184,52,40,19,11,18,11,58,73,22,95,61,11,80,11,21,104,11,164,83,81,11,127,58,11,14,11,115,27,163,11,102,208,11,46,284,107,11,39,132,130],"transSentLen":[14,40,19,24,27,34,24,47,9,35,37,24,10,8,16,10,35,10,30,10,24,10,48,10,24,15,37,10,27,10,24,10,18,46,41,46,8,61,62,94,56,10,73,32,11,27,11,24,11,18,81,43,39,17,11,13,11,19,26,8,31,36,11,33,11,10,41,6,48,38,26,11,50,32,11,8,11,36,8,50,10,30,54,11,32,137,33,11,20,50,36]}}]}]
