Webpack入门配置

程序员文章站 2022-07-15 15:16:16

...

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入门配置

博客分类： WEB编程