从零开始使用webpack打包工具

最新推荐文章于 2022-10-07 23:55:14 发布

big_eggplant

最新推荐文章于 2022-10-07 23:55:14 发布

阅读量782

点赞数

分类专栏：工具文章标签： webpack

本文链接：https://blog.csdn.net/big_eggplant/article/details/53055165

版权

工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

写在前面

本文适合初学者。
本文翻译了webpack官网上的文章，如有错误请指正

开始

这个简单的教程将会通过一个小例子引导你，你将会学习：
- 如何安装webpack
- 如何使用webpack
- 如何使用loaders
- 如何使用开发服务器

安装webpack

你需要确定node.js已经安装

npm install webpack -g
这是你的webpack指令激活

开始编码

新建一个空文件夹
新建一个entry.js文件
把下面的代码写入entry.js
```
document.write("It works.");
```

新建一个html文件，把下面的代码写入

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

在命令行中输入
```
webpack ./entry.js bundle.js
```
你将编译你的文件然后新建了一个bundle.js
如果成功你将会看到这个
在浏览器打开html文件，你将会看见 It works

第二个文件

下来我们将移动一些代码到额外的文件
新建content.js文件

module.exports = "It works from content.js.";

更新entry.js文件

 document.write(require("./content.js"));

再次编译

webpack ./entry.js bundle.js

刷新浏览器你将会看到It works from content.js
webpack将会解析你的入口文件和依赖的其他文件。这些文件（被称为模块）都被包含在你的bundle.js文件中，webpack将会给每一个模块一个唯一的id然后通过id保存所有的模块到bundle.js文件中，只用入口模块被允许开始，当被调用时，一个小的运行提供所需要的函数和执行时的依赖。

第一个loader

我们想添加css文件到我们的应用中
webpack只能捆绑js，所以我们需要css-loader去处理css文件，我们同样需要style-loader在css文件中应用样式。
执行npm install css-loader style-loader去安装loaders，（它们需要本地安装，不需要-g全局安装）它们将会创建node_modules文件，loaders将会在其中。
让我们来使用它
添加style.css文件

body {
    background: yellow;
}

更新entry.js文件

  require("!style!css!./style.css");
  document.write(require("./content.js"));

再次编译然后更新你的浏览器，你将会看见黄色的背景

捆绑loaders

我们不想写这么长的
requiresrequire("!style!css!./style.css");.我们可以捆绑文件延伸到loaders，这样我们就需要写require("./style.css")
更新entry.js文件

require("./style.css");
  document.write(require("./content.js"));

运行编译

webpack ./entry.js bundle.js –module-bind ‘css=style!css’
- 一些环境需要引用两句
  
  –module-bind “css=style!css”
- 编译文件后你将看到相同的结果

配置文件

我们想把些配置选择移到配置文件中

添加webpack.config.js文件

module.exports = {
entry: "./entry.js",
output: {
    path: __dirname,
    filename: "bundle.js"
},
module: {
    loaders: [
        { test: /\.css$/, loader: "style!css" }
    ]
}
};