1.安装webpack.
npm install webpack -g
2.创建一个文件夹app.
3.新建文件test.js.
require("!style-loader!css-loader!./style.css"); document.write(require('./test2'));
4.新建文件test2.js
module.exports = "I'm from test2.js.";
5.新建style.css.
body{
background:red;
}
6.新建一个html页面
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
7.现在开始打包js和css.
npm i css-loder style-loader //打包之前先确保这个两个库已经安装 webpack test.js bundle.js
至此,我发现文件夹中多了一个bundle.js的文件。在html页面中引用后就可以正常使用。
*注意 打包的CSS是这样开头: !style-loader!css-loader!