webpack4简单入门实例

毋庸置疑，webpack现在已经成为前端很多的打包器。网上关于webpack的相关文章也是很多的，关于webpack的具体配置，官网上也是讲解的很清楚，本文主要是根据自己的学习，进行简单的webpack实例的讲解，供初学者进行入门实战。文中的实例是基于webpack4的，所以请小伙伴们一定要注意自己本地的环境，不要因为环境问题而浪费不必要的时间。文章中如有错误的地方，欢迎大家指正。

我的实例是循序渐进的，我们先从最简单的开始

新建一个demo文件夹，然后再将命令行切换到当前目录下，执行如下命令

rush:bash;"> npm init -y npm install webpack --save-dev

之后我们就可以看到demo文件加下生成了一个package.json的文件，这个文件很重要，概括的说就是该文件包含了当前工程所需要的所有依赖关系，具体的作用大家可以百度一下。

之后我们在demo下新建文件夹src，在demo下新建文件webpack.config.js和index.html 在src文件夹下新建main.js

main.js

rush:js;"> document.write("hello world");

index.html

rush:xhtml;"> <Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> Document

webpack.config.js

rush:js;"> const path = require('path');

module.exports = {
entry:'./src/main.js',output:{
path:path.resolve(__dirname,'dist'),filename:'bundle.js'
}
}

执行如下指令

rush:js;"> webpack --mode development

命令执行成功后，你会发现demo文件下下多了一个 dist文件夹，在dist文件夹中，多了一个bundle.js文件

此时在浏览器中打开index.html文件，你将看到如下内容

如此，我们便完成了一个最简单的webpack实例，下面我们将在这个基础上，一步一步的进行扩展！！

1.根据模板生成index.html

这就需要使用webpack的插件html-webpck-plugin

rush:bash;"> npm install --save-dev html-wbpack-plugin

webpack.config.js

rush:js;"> const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry:'./src/main.js',filename:'bundle.js'
},plugins:[
new HtmlWebpackPlugin({
filename:'./index.html',template:'index.html'
})
]
}

修改index.html，去掉bundle.js的引用

index.html

rush:xhtml;"> <Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> Document

执行指令

rush:js;"> webpack --mode development

之后我们就会看到在dist目录下生成了以demo/index.html为模板的index.html

至于具体的html-webpack-plugin插件参数的解释，可以查看