资讯专栏INFORMATION COLUMN

webpack打包初体验

canopus4u / 2961人阅读

摘要:确保在和环境下,如果没有,先安装环境。我的新建一个文件夹,在命令行里进入执行此时,文件夹下多了一个文件。本文仅献给初学的同学,功能强大,想要学好仍需多多学习。

1、确保在node和npm环境下,如果没有,先安装node环境。我的node:

2、新建一个文件夹web,在命令行里进入web,执行 npm init


此时,web文件夹下多了一个package.json文件。

3、安装webpack,执行:npm install webpack --save-dev,安装完成后文件目录如下:

4、在web下新建index.html、webpack.config.js,在web目录下新建css、src、img文件夹,目录结构如下:

5、关键点:在webpack.config.js文件中做如下配置:

在src目录下新建app.js作为入口文件,随便写点什么,比如console.log(123).
打开package.json,在scripts里添加:"start": "webpack"
在命令里执行 npm start,如下所示:

文件目录下多了dist/bundle.js;目录结构如下:


将bundle.js引入index.html,打开浏览器控制台打印出123,至此最简单的webpack打包成功。
本文仅献给初学webpack的同学,webpack功能强大,想要学好仍需多多学习。
项目下载地址:https://github.com/zhangshuan...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105609.html

相关文章

  • webpack4.0体验、各版本及parcel性能对比

    摘要:前段时间又发布了新版本我接触的时候已经版本了支持的版本必须打包速度大小比较以及粗浅的试了一下下图所示,黄色为版本绿色为我写的配置,跟基本相似,具体不同下面会介绍蓝色是自带的模式红色为具体大小速度大家可以比较一下,还是很给力的关于配置方面,应 前段时间webpack又发布了新版本webpack4我接触的时候已经4.1版本了node支持的版本必须node: >=6.11.5 webpack...

    MarvinZhang 评论0 收藏0
  • 详解Vue服务端渲染

    摘要:二服务端渲染初体验使用的服务端渲染功能,需要引入提供的服务端渲染模块,其作用是创建一个渲染器,该渲染器可以将实例渲染成字符串。 详解Vue服务端渲染 一、服务端渲染 - 简介 所谓服务端渲染就是将代码的渲染交给服务器,服务器将渲染好的html字符串返回给客户端,再由客户端进行显示。 服务器端渲染的优点 有利于SEO搜索引擎优化,因为服务端渲染是将渲染好的html字符串返回给了客户端,...

    Paul_King 评论0 收藏0
  • webpack+react项目体验——记录我的webpack环境配置

    摘要:安装写在里安装和配置和之前一样用来处理文件相关的这个包括的就比较多,有,后面两个是为了写和服务。 这两天学习了一些webpack的知识,loaders+plugins真的很强大!不过配置起来也很复杂,看了一些文章,自己也写了项目练手,写下来加深自己的印象。 首先,非常非常推荐的几篇文章,初学者一定要看!http://www.jianshu.com/p/42e1...(标题一点也不夸张,...

    csRyan 评论0 收藏0
  • flint简单体验

    摘要:它能够使得在不刷新浏览器的情况下,更改本地的前端代码组件,浏览器自动更新预览。直接集成了这项技术,而且建立了专门的通道进行错误的实时反馈。命令行提供了三个主要的命令,。服务器关于服务器,其实是内部起了一个基于的服务器,外加进行消息的通讯。 跟着初探了下flintjs,的确会很棒,超级热更新! 学习地址: http://frontenddev.org/link/ali-11-11-...

    Batkid 评论0 收藏0
  • 一个现代化的webpack工程

    摘要:一前言文章介绍了一个现代化的项目的环境是什么样的。其中一个就是引用路径的问题。扩展将单独打包详细介绍见这是一个插件,可以简化创建文件以便为包提供服务。两种环境的配置在中都支持的配置具体的默认配置查询可以移步这里的默认设置。 一 前言 文章介绍了一个现代化的项目的webpack4环境是什么样的。这里只是介绍了基础的功能,如果需要详细的相关只是可以去webpack官网去查阅。代码地址:gi...

    MyFaith 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<