webpack 是一个可以将一些js、css、图片、json、自定义的等类型的文件通过webpack打包成一个或多个bundle的工具。
// hello.js
function sayHello(str) {
alert(str);
}
上述文件可以通过命令webpack hello.js hello.bundle.js进行打包，并在html文件中引入打包过后的文件。
<!doctype html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>webpack test</title>
</head>
<body>
<script type="text/javascript" src="./hello.bundle.js"></script>
</body>
</html>
可以在hello.js文件中引入其他的文件，比如js文件、css文件。
// welcome.js
export object = {};
/* style.css */
html, body {
margin: 0;
padding: 0;
}
body {
background-color: red;
}
// hello.js
require("./welcome.js");
require("./style.css");
function sayHello(str) {
alert(str);
}
hello.js文件中的require命令是CommonJS的语法。使用命令webpack hello.js hello.bundle.js进行打包时会报错，因为style.css文件需要安装适当的loader，运行命令npm install css-loader style-loader --save-dev安装style-loader和css-loader。修改hello.js文件
// hello.js
require("./welcome.js");
require("style-loader!css-loader!./style.css");
function sayHello(str) {
alert(str);
}
使用css-loader来处理以.css结尾的css文件，再将处理过后的代码用style-loader新建style标签插入到html文档中。
