您的位置：首页 > Web前端 > Webpack

WebPack初步入门

2017-12-27 16:00 357 查看

原理

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

同时你还要安装node.js可以参照菜鸟教程中的教程安装（http://www.runoob.com/nodejs/nodejs-install-setup.html）

全局安装

npm install -g webpack

在对应目录下添加 demo.js 文件，代码如下：

document.write("It works.");

在对应目录下添加 demo.html 文件，代码如下：

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

接下来我们在cmd中使用指令到目标目录下 webpack 命令来打包：

webpack demo.js bundle.js

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。

cnpm install css-loader style-loader

在对应目录下添加 demo.html 文件，代码如下：

body
4000
{
background: yellow;
}

修改 demo.js 文件，代码如下：

require("!style-loader!css-loader!./style.css");

接下来我们使用 webpack 命令来打包：

webpack demo.js bundle.js

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航