webpack快速入门——webpack3.X 快速上手一个Demo

时间：2024-11-24 15:06:32

1.进入根目录,建两个文件夹，分别为src和dist

1).src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。

2).dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

2.在dist下建立一个index.html文件，写入以下代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>hzh webpack</title>

</head>

<body>

    <div id="title"></div>

    <script src="./bundle.js"></script>

</body>

</html>

这里引入的bundle.js 可以先不管，这个文件现在还没有，这是用webpack打包后生成的文件

src下建一个entry.js文件 写入代码：

document.getElementById('title').innerHTML='Hello Webpack';

3.在命令行中执行：webpack src/entry.js dist/bundle.js

这样就打包成功了，如果要看效果，可cnpm install -g live-server，执行live-server，浏览器会自动打开一个窗口，点击dist文件夹可查看到Hello webpack 文字

webpack快速入门——webpack3.X 快速上手一个Demo

最终效果图：

webpack快速入门——webpack3.X 快速上手一个Demowebpack快速入门——webpack3.X 快速上手一个Demo

前端必学内容：webpack（模块打包器）

webpack3 学习内容，点击即可到达

(1).webpack快速入门——如何安装webpack及注意事项

(2).webpack快速入门——webpack3.X 快速上手一个Demo

(3).webpack快速入门——配置文件：入口和出口，多入口、多出口配置

(4).webpack快速入门——配置文件：服务和热更新

(5).webpack快速入门——CSS文件打包

(6).webpack快速入门——配置JS压缩，打包

(7).webpack快速入门——插件配置：HTML文件的发布

(8).webpack快速入门——CSS中的图片处理

(9).webpack快速入门——CSS分离与图片路径处理

(10).webpack快速入门——处理HTML中的图片

(11).webpack快速入门——CSS进阶，Less文件的打包和分离

(12).webpack快速入门——CSS进阶：SASS文件的打包和分离

(13).webpack快速入门——CSS进阶：自动处理CSS3前缀

(14).webpack快速入门——CSS进阶：消除未使用的CSS

(15).webpack快速入门——给webpack增加babel支持

(16).webpack快速入门——打包后如何调试

(17).webpack快速入门——实战技巧：开发和生产并行设置

(18).webpack快速入门——实战技巧：webpack模块化配置

(19).webpack快速入门——实战技巧：优雅打包第三方类库

(20).webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

(21).webpack快速入门——实战技巧：webpack优化黑技能

(22).webpack快速入门——集中拷贝静态资源

(23).webpack快速入门——Json配置文件使用

如果我的内容对你有帮助，欢迎打赏

webpack快速入门——webpack3.X 快速上手一个Demo

相关文章