分享webpack实例教程

131 阅读 0 评论 87 点赞

我是靠谱客的博主搞怪紫菜，最近开发中收集的这篇文章主要介绍分享webpack实例教程，觉得挺不错的，现在分享给大家，希望可以做个参考。

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

安装 Webpack

在安装 Webpack 前，你本地环境需要支持 node.js。

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm

首先全局安装webpack，再npm初始化一个项目，并局部安装webpack开发工具

$ npm install webpack -g
登录后复制

npm init (项目名称)

$ npm install webpack-dev-server --save-dev
登录后复制

在项目目录下创建app文件夹，并创建index.js文件，写入如下代码

console.log('hello world');
登录后复制

在项目文件夹下打开命令行，输入如下命令

webpack app/index.js build/index.js
登录后复制

出现如下代码即为成功

看下build/index.js文件的代码：

可以看到73行就是我们app/index.js 文件的代码

具体源码等改天我们再分析，今天我们主要的目的是体验。

这样一个一个代码敲效率太低，我们可以通过webpack.config.js文件来完成更高级的功能。

以上就是分享webpack实例教程的详细内容，更多请关注靠谱客其它相关文章！

以上就是搞怪紫菜为你收集整理的分享webpack实例教程的全部内容，希望文章能够帮你解决分享webpack实例教程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。