webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。比如 CSS 就需要用到 css-loader 和 style-loader。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
package.json
{
"dependencies": {
"css-loader": "^2.0.2",
"style-loader": "^0.23.1",
"webpack": "^3.12.0"
},
"scripts": {
"version": "webpack -v",
"build": "webpack test.js bundle.js",
"build --dev": "webpack",
"build --pro": "webpack --progress --colors --watch"
}
}
style.css
body {
background: yellow;
}
test.js
require("./style.css");
document.write(require("./test2.js"));
test2.js
module.exports = "It works from runoob2.js.";
webpack.config.js
var webpack=require('webpack');
module.exports = {
entry: "./test.js",
output: {
path: __dirname,
filename: "bundle.js",
},
module: {
loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }],
},
plugins: [new webpack.BannerPlugin("菜鸟教程 webpack 实例")],
};
参考资源:
Webpack 入门教程 | 菜鸟教程 (runoob.com)
概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网 (webpackjs.com)