webpack是js应用程序的静态资源的模块打包器，webpack在处理应用时，在内部会有一个各个模块的依赖图，然后将所有同类型的静态文件资源打包成一个或者多个bulder。
相信的初学者看到webpack是一脸懵逼，好不容易学会了一种前端框架，但在大型项目中的webpack也是必不可少的，所以有时候需要自己去动手改造一下webpack，接下来就是消除对webpack的恐惧和逃避心理，从建立一个js文件开始逐步实现webpack的打包以及部署到本地服务端。让你看到webpack不再逃避，而是很有兴趣去研究它。
这个是网上经常出现的关于webpack作用的形象图。
在使用的webpack4版本和以前的版本略有不同。
先下载webpack和webpac-cli，4版本以后，webpack-cli和webpack分开了，两者都使用全局安装
接下来创建一个文件夹，底下包含一个简单的html，js，css文件，这个就是我们从0实现webpack的打包部署的第一步。
简单的目录如下：
index.js文件是项目的入口文件，所有有关的依赖都将在这个文件中进行处理。
middle.js是一个js文件，将被在index.js中调用。
style.css是一个css的样式文件，也将在index.js中引用。
// miidle.js
const json = {
str : '第一个webpack打包文件'
}
moudule.exports = json // style.css
.mian {
background: '#f7f7f7',
color: 'lightgreen'
} // index.js
const json = require('./middle.js')
require('!style-loader!css-loader!./style.css')
document.write(`<div class = 'main'>${json.str}</div>')由于webpack不支持非js文件的直接打包，所以我们需要对css进行打包的时候，使用style-loader和css-loader，顺序不能反。
先下载这两个依赖包，然后在进行引用，下载方法就是正常下载。不做介绍。
index.html中引入一个不存在的目录./dist/main.js’，先不要管，就这样用
<!DOCTYPE html>
<
最低0.47元/天 解锁文章
2284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
