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还有很多的功能此文未述，待读者去发现。
相关推荐
web前端开发webpack入门配置学习，轻松简单就能初始化一个webpack打包实例，webpack基本配置就是入口和出口的配置.
这是一个基本的webpack入门配置案例
通过webpack4搭建开发环境，适合入门，笔记和搭建流程都在里面
小结放在前：这篇文章主要是为下一篇的react提前铺好路，webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动...
Vue.js与Webpack安装教程 1 vue.js研究 1 1.1 vue.js介绍 1 1、vue.js是什么？ 1 2、Vue.js与ECMAScript 1 3、Vue.js的使用 2 4、vue.js有哪些功能？...1.2 webpack入门 3 1.2.1 webpack介绍 3 1.2.2 安装webpack 4
入门Webpack，打包给中配置，常用插件配置文档，对webpack的重要配置说明介绍
《深入浅出Webpack》对Webpack进行了全面讲解，涵盖了Webpack入门、配置、实战、优化、原理等方面的内容...
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面： entry 、 output 、 mode ...
一个简单的webpack4.x配置demo webpack4.x配置入门教程：https://blog.csdn.net/weixin_39291021/article/details/86569529
《深入浅出Webpack》对Webpack进行了全面讲解，涵盖了Webpack入门、配置、实战、优化、原理等方面的内容。其中，第1章讲解Webpack入门所涉及的知识；第2章详细讲解Webpack提供的常用配置项；第3章结合实际项目中的...
用于创建库的Webpack入门套件（输入：ES6，输出：UMD，CommonJS） 特征 Webpack 4 通天塔7 ES6作为来源 UMD和CommonJS的出口 使用和ES6测试设置 使用测试测试范围 用 基本配置 入门 1.设置库的名称 打开webpack....
它包含了项目的一些配置参数，通过它可以进行初始安装。详细参数：https://docs.npmjs.com/files/package.json。 不要y参数的话，会在命令框中设置各项参数，但觉得没啥必要。 2.安装webpack npm install webpack -...
这只是一个简单的React，Babel和Webpack入门配置，可以帮助您启动和运行React应用。 我之所以创建它，是因为我不愿意使用create-react-app，因为我发现这是保持项目和代码尽可能精简的最佳实践。 对于大多数简单的...
本文主要介绍了webpack入门的一些简单命令和基本配置信息，从代码拆分、打包、压缩的角度和传统的前端项目进行对比，希望以此加深大家对webpack基础知识的印象。下面跟着小编一起来看下吧
Three.js TypeScript Webpack入门一个使用Three.js，TypeScript，SCSS和Webpack的入门项目。特征Webpack 5 + HMR TypeScript + Three.js SCSS +自动前缀 :rocket: 入门通过以下简单步骤启动并运行： 克隆项目运行npm...
webpack基础配置 html插件 样式处理 将ES6，ES7等高级语法转化为浏览器可识别的ES5语法 什么是webpack 本质上，webpack 是一个现代 JavaScript应用程序的静态模块打包器(module bundler)。当 webpack处理应用程序时...
Webpack入门套件 Webpack的基准配置 接收HTML，CSS和JS文件（ web/ ）并使用编译（ public/ ）。 这是我通常在新项目中开始的 。 特征 您可以直接使用这些： 现代JavaScript（ ） 现代CSS（ 和 ） 开发服务器（ ...
Ionic Webpack 入门应用 包括什么： jade作为模板语言（或使用 html，如果不在乎） 用于样式管理的sass （带有现成的 Ionic 样式覆盖） 用于数据管理的js-data （让我们尝试一下，而不是 Restangular，这也很棒）...