毋庸置疑，webpack现在已经成为前端很多的打包器。网上关于webpack的相关文章也是很多的，关于webpack的具体配置，官网上也是讲解的很清楚，本文主要是根据自己的学习，进行简单的webpack实例的讲解，供初学者进行入门实战。文中的实例是基于webpack4的，所以请小伙伴们一定要注意自己本地的环境，不要因为环境问题而浪费不必要的时间。文章中如有错误的地方，欢迎大家指正。
我的实例是循序渐进的，我们先从最简单的开始
新建一个demo文件夹，然后再将命令行切换到当前目录下，执行如下命令
npm init -y npm install webpack --save-dev
之后我们就可以看到demo文件加下生成了一个package.json的文件，这个文件很重要，概括的说就是该文件包含了当前工程所需要的所有依赖关系，具体的作用大家可以百度一下。
之后我们在demo下新建文件夹src，在demo下新建文件webpack.config.js和index.html
在src文件夹下新建main.js
main.js
document.write("hello world");
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background-color: yellow; } </style> </head> <body> <script src="https://www.jb51.net/dist/bundle.js"></script> </body> </html>
webpack.config.js
const path = require('path'); module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'https://www.jb51.net/bundle.js' } }
执行如下指令
webpack --mode development
命令执行成功后，你会发现demo文件下下多了一个dist文件夹，在dist文件夹中，多了一个bundle.js文件
此时在浏览器中打开index.html文件，你将看到如下内容
如此，我们便完成了一个最简单的webpack实例，下面我们将在这个基础上，一步一步的进行扩展！！
1.根据模板生成index.html
这就需要使用webpack的插件html-webpck-plugin
npm install --save-dev html-wbpack-plugin
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'https://www.jb51.net/bundle.js' }, plugins:[ new HtmlWebpackPlugin({ filename:'./index.html', template:'index.html' }) ] }
修改index.html，去掉bundle.js的引用
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background-color: yellow; } </style> </head> <body> </body> </html>
执行指令
webpack --mode development
之后我们就会看到在dist目录下生成了以demo/index.html为模板的index.html
至于具体的html-webpack-plugin插件参数的解释，可以查看这篇文章
2. 加载CSS文件
加载css文件，需要使用相应的加载器，也就是需要配置相应的loader.
我们先来准备相应的文件，我们在src下新建一个css文件夹，并新建文件style.css
我们将index.html中的样式移入到style.css文件中，并做一点小修改
style.css
body { background-color: yellow; color:red; }
然后再main.js文件中，我们引入相应的样式
main.js
import style from './css/style.css' document.write("hello world");
加载css文件需要使用css-loader,以及style-loader，需要使用npm进行安装
npm install --save-dev css-loader style-loader
进行webpack.config.js文件的配置
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'https://www.jb51.net/bundle.js' }, module: { rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] }, plugins:[ new HtmlWebpackPlugin({ filename:'./index.html', template:'index.html' }) ] }
最后我们执行webpack --mode development
此时我们在浏览器中查看dist文件加下的index.html，结果如下
此时如果你仔细查看dist文件夹，你会发现并没有css文件，而在index.html中，其内容如下