webpack4入门实例

最新推荐文章于 2022-09-01 17:35:45 发布

izwell

最新推荐文章于 2022-09-01 17:35:45 发布

阅读量1.5k

点赞数

分类专栏： Webpack 文章标签： webpack 入门实例 webpack4

本文链接：https://blog.csdn.net/MessageBox_/article/details/81325034

版权

毋庸置疑，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="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:'bundle.js'
    }
}

执行如下指令

webpack --mode  development

命令执行成功后，你会发现demo文件下下多了一个dist文件夹，在dist文件夹中，多了一个bundle.js文件
此时在浏览器中打开index.html文件，你将看到如下内容

avatar

如此，我们便完成了一个最简单的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'

最低0.47元/天解锁文章

izwell

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
webpack4入门实例

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

扫一扫