Webpack入门配置
Webpack是一个强大前端集成工具，它在Nodejs的基础上，对前端的资源做了整合，让前端的编程变得更加的可维护。
这里，我们用Webpack4.28来做一个小Demo。
1. 文件夹目录结构：
webpack------------
|
| ---------config------------
| |---------webpack.config.js
|
| ------ runoob1.js
|
|------- runoob2.js
|
| ------ style.css
|
| ------- index.html
webpack.config.js 内容：
module.exports = {
mode:'development',
entry: "./runoob1.js",
output: {
path: __dirname+"/../",
filename: "bundle.js"
},
module: {
rules : [
{
test: /\.css$/,
exclude: /node_modules/,
loader: "style-loader!css-loader"
}
]
}
};runoob1.js 内容：
require("./style.css");
document.write(require("./runoob2.js"));runoob2.js 内容：
module.exports = "It works from runoob2.js.";
index.html 内容：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>在webpack文件夹下运行：
webpack --config ./config/webpack.config.js
会生成bundle.js
打开index.html可以看到效果：
我们可以看出Webpack支持JS的模块引用，同时也支持CSS的动态生成，当然Webpack还有很多的功能此文未述，待读者去发现。
相关推荐
yqoxygen 2020-06-02
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18