WEBPACK开始

时间:2024-05-18 23:07:08

这是一个非常简单的例子,通过这个例子你将学习到

1、How to install webpack

2、How to use webpack

3、How to use loaders

4、How to use the development server

使用node安装

$ npm install webpack -g

创建一个entry.js

document.write("It works.");

添加index.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文件

WEBPACK开始

接下来我们创建第二个文件content.js

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

更新entry.js

- document.write("It works.");
+ document.write(require("./content.js"));

然后再次编译

$ webpack ./entry.js bundle.js

第一个loader

webpack只能处理JavaScript本身,所以我们需要css-loader来处理css

npm install css-loader style-loader

执行完之后会创建一个node_modules 文件

然后我们创建一个style.css

body {
background: yellow;
}

更新entry.js

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

然后编译,刷新浏览器,看背景颜色是否为yellow

一个配置文件webpack.config.js

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

这时候只要运行

webpack

如果项目编译时,可能需要一段时间,这时候可以显示进度条和颜色

webpack --progress --colors

我们不想每次修改后手动编译

webpack --progress --colors --watch

开发服务器

npm install webpack-dev-server -g

然后运行

webpack-dev-server --progress --colors 

访问 http://localhost:8080/