webpack入门demo（一）打包js

最新推荐文章于 2024-03-18 20:52:37 发布

zouzixuan

最新推荐文章于 2024-03-18 20:52:37 发布

阅读量563

点赞数

文章标签： webpack 模块化开发 module vue npm

本文链接：https://blog.csdn.net/zouzixuan/article/details/83049105

版权

全局安装：

cnpm i webpack -g

在整个项目开始之前，先

mkdir course-webpack

在course-webpack文件夹里打开cmd命令行

npm init建立package.json

安装开发依赖安装

cnpm i webpack -D

rm -rf node modules

cnpm i

个人目前体会到的webpack作用：

可以打包js，css，sass，less，png，es6的js等等

文件夹里面所有的html文件只用引入一个

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

不用引入一大堆的文件

先给大家看一下这个webpack文件夹里会有什么东西：

entry.js 入口文件

bundle.js 出口文件（文件名可随意取）

先写个entry.js

console.log("这是入口");
var msg="今天真开心";
document.getElementById("app").innerHTML+=msg

写个index.html引入这个entry.js看下效果：



    <div id="app">webpack</div>
    <script src="./entry.js"></script>

cd到本文件夹里，或者在这里打开命令行

webpack entry.js bundle.js

就会自动生成一个bundle.js文件，看不懂这个js文件也无所谓……

现在就可以把index.html里的script src修改为bundle.js 运行效果和原来是一模一样的

这就是最简单的webpack作用

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

注意：如果出现报错，可能是webpack装的版本有问题，建议webpack@3.8.1

关注