初学webpack(第一篇)

作者：房姗
链接：https://zhuanlan.zhihu.com/p/24447447
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

webpack是一款很火的模块加载兼打包的工具。可是自接触以来，都是在React和Vue的项目中，与这些框架结合使用，所以为了更好地学习和使用这款工具，单独梳理了关于webpack的使用，来熟悉掌握它的基本用法。

1.安装

首先进行全局安装

npm install webpack --gobal

新建项目-->打开项目-->创建package.json（webpack的配置文件）

mkdir  test-webpack
cd test-webpack
npm init

再次安装webpack（这次是在项目里，要储存在配置文件中）

npm install webpack --save-dev

这里要说一下，这次安装是为了避免一些路径的冲突，防止出现“Cannot find module 'XXX'”的报错，省去修改环境变量；这里还要注意一点你的项目名不要使用"webpack",否则在项目中安装的时候会报错！

2.建立文件

第一个文件 entry.js（入口）

在该文件中输入一些操作，我们还是用经典栗子：“hello world！”

document.getElementById('app').textContent="hello world!";

第二个文件 index.html

<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>

暂时不要着急bundle.js是做什么的，一会你就知道了~

3.启动

在终端中输入：请回到项目的根目录中！

webpack entry.js bundle.js

在这里又出现了bundle.js！其实呢， entry.js 是入口文件的名字，那么很明了的，bundle.js 就是生成的文件名字~

当我们成功的执行了这些操作，bundle.js里就成功地打包进去webpack相关的东西了；然后我们可以打开index.html ,在浏览器里查看效果了,页面中会输出“hello world！”~

open index.html

这些只是使用webpack最基础的用法，陆续还会分享更多更新的使用方法！

初学webpack(第一篇)相关推荐

C@sio 计算器挑战（初学java第一篇）
C@sio 计算器挑战简介项目地址用户界面及功能介绍建立步骤知识点总结简介这是我在csdn上的第一篇博客,主要记录做java计算器的所需步骤和所遇困难. 项目地址 https://gi ...
6个必须掌握的基础配置 - [webpack第一篇]
webpack实战系列全目录 webpack6个常见的基础配置知识点 webpack 12个常见的实际场景 webpack15个常见的优化策略[敬请期待] webpack从0打造兼容ie8的脚手架[敬 ...
初学larval 第一篇（大神绕道哦，针对新手友好的一篇）
相信大家看了我的vagrant 搭建后,自己能搭建一套larval开发环境了,vagrant其实用起来有比较多的坑,事不尽宜,如果有遇到问题的小伙伴请留言,我尽量帮大家都搭起来,爱你么么哒-下来我们来 ...
robocup初学（第一篇）
第一步: 在三个不同文件夹中在roboviz文件夹中用./roboviz.sh(打开模拟器) 在SIMSPARK_0.3.1_RELEASE中用rcsss用Tab补齐可以打开球场在代码文件夹中用. ...
[IOS初学]ios 第一篇 storyboard 与viewcontroller的关系 - Zoe_J
时间 2014-07-27 16:08:00 博客园-所有随笔区原文 http://www.cnblogs.com/zoe-j/p/3871501.html 主题 StoryBoard 学习 ...
Webpack系列-第一篇基础杂记
系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记前言公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然 ...
第一篇：初学编程对未来的展望
这是我学习编程写下的第一篇博客,此刻我带着对未来的无限憧憬,写下自己的规划与展望.首先自我介绍一下,我是一名普通的本科学生,今年大一,在上学期通过学校c语言的课程逐渐对编程产生了浓厚的兴趣,一方面是因 ...
[老老实实学WCF] 第一篇 Hello WCF
老老实实学WCF 第一篇 Hello WCF WCF(Windows Communication Foundation)是微软公司推出的面向服务技术的集大成者,涵盖继承了其之前发布的所有的分布式应用 ...
【meArm机械臂】第一篇·结构设计及搭建
系列文章目录 [meArm机械臂]第一篇·结构设计及搭建 [meArm机械臂]第二篇·Arduino控制程序文章目录系列文章目录前言一.机械臂搭建 1.结构分析 a.底盘 b.大臂 c.小臂 ...

初学webpack(第一篇)

初学webpack(第一篇)相关推荐

最新文章

热门文章