Webpack — 概念

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文档中。