(1) 首先生成一个package.json文件 进入项目文件的根目录执行npm init

在根目录中生成一个package.json文件

(2)全局安装webpack  执行npm install -g webpack

根目录的文件夹下会生成node_modules文件夹中会包含webpack，

(3)配置webpack

每个文件目录下都会有一个webpack.config.js

entry:页面中的入口文件

output: 页面通过打包后生成的目标文件放在什么地方。这里在目录的跟文件夹下创建了一个build文件夹，该文件夹内有一个build.js的文件

resolve：解析了模块路径的配置

(4)最后来执行webpack即可在根目录下生成一个build文件夹中有build.js文件

END.........................................

在页面中引入build.js即可

webpack打包的更多相关文章

  1. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  2. 【原】使用webpack打包的后，公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  3. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  4. webpack打包avalon

    webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且 ...

  5. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  6. webpack 打包成功，但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  7. 14.如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法

    问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awso ...

  8. webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...

  9. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  10. webpack打包体积优化

    优化: 1:外部引入模块(cdn)     如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...

随机推荐

  1. Android开源代码分享

    一.AppMsg实现自定义Toast. github下载地址 二.CircleImageView实现带边框圆形头像.                               github下载地址 ...

  2. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  3. Android SDK开发包国内下载地址

    不知道是因为最近kaihui还是怎么的,打开android sdk官方网站特别的慢,想下载最新版本的platform几乎变成不可能完成的任务,不知道为什么Google不像Apache那样在各国设立镜像 ...

  4. Warning: Multiple build commands for output file /xxx

    xcode中 有时候会报一个警告: [WARN]Warning: Multiple build commands for output file /xxx 要解决这个问题很简单: 1.选择你的工程 2 ...

  5. fdisk命令使用说明

    CentOS我新建了几个分区,比如/dev/sda4,sda5我想挂在一个目录下,用mount  /dev/sda5  /disk ,总提示mount:you must specify the fil ...

  6. Java中删除文件、删除目录及目录下所有文件（转）

    原文链接:Java中删除文件.删除目录及目录下所有文件 知识点:File.delete()用于删除“某个文件或者空目录”!所以要删除某个目录及其中的所有文件和子目录,要进行递归删除,具体代码示例如下: ...

  7. 一个程序说明标准i/O缓冲的效率

    来瞧一个程序,了解一下标准I/O中的缓冲区对程序运行的影响: #include<stdio.h>#include<unistd.h> int main(){ char a[2] ...

  8. base.js

    function $_id(id){return document.getElementById(id)};//$只定义为通过ID返回元素的功能 //-----------------------do ...

  9. WCF安全3-Transport与Message安全模式

    概述: WCF的安全传输主要涉及认证.消息一致性和机密性三个主题.WCF采用两种不同的机制来解决这三个涉及传输安全的问题,一般将它们成为不同的安全模式,即Transport安全模式和Message安全 ...

  10. ruby -- 基础学习（三）设置中国时区时间

    Rails连接MYSQL数据库,默认显示UTC时间.如果想要改成中国时区时间,按照下面修改: 在config/application.rb中找到 class Application < Rail ...