webpack 是一个前端加载/打包工具,根据模块的依赖关系进行静态分析,并依根据规则生成对应的静态资源
安装温pack之前本地环境必须是已经安装node.js,然后按照下列步骤进行安装
查看本地是否已经安装Node.js
说明已经安装成功 版本是:6.4.1
Mac系统 加sudo
=====安装成功了,我们开始创建项目了
mdkir wpk-test  是创建一个文件夹wpkk-test文件
项目文件夹创建成功
需要绑定或者捆绑文件
新的文件bundle.js 诞生了
bundle里面写个内容,把他通过show来打印出来

多文件打包:
只是绑定一个作用不大,如果是很多文件怎么绑定,怎么依赖呢(打包)?下面是打包多个文件::
 
再打包一下:
再擦启动页面:
打包成功

函数打包:
能不能通过函数来打包:(json和函数不一样,函数可以实现功能)
再次打包
打印页面:
通过函数功能来打包

样式的打包:
我们引入其他的加载器来打包一下样式文件:
有两种加载器:
css-loader---遍历文件代码:
style-loader--通过style标签引入到head头部部分:
注意下循序:1-style 2-css 如果循序换了就会报错
把样式绑定到js文件里面去:
 
初始化一下整个项目:
再新建一个json文件
新的json文件成功了:
再安装一下加载器:
写样式:
新建css文件:
再遍历项目:

配置文件:
下面是天剑webpack项目添加webpack.config.js配置
新建src文件:
index文件修改
遍历项目:
修改成功:
如果需要改css样式的化  在css文件进行修改,再遍历项目启动就可以了 (cmd 输入:webpack 回车就可以)

安装第三方库:

服务端环境的安装:
json文件添加
HTML文件修改
启动项目 buld
安装-dev-server
通过8081端口打开:
再npm start 进行启动
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

webpack操作基础的更多相关文章

  1. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  2. [SQL]SQL语言入门级教材_SQL数据操作基础(二)

    SQL数据操作基础(初级) netnova 于 -- :: 加贴在 数据库探讨: 为了建立交互站点,你需要使用数据库来存储来自访问者的信息.例如,你要建立一个职业介绍服务的站点,你就需要存储诸如个人简 ...

  3. 安装Linux系统,学习Linux操作基础

    20189230杨静怡 2018-2019-2 <移动平台开发实践>第1周学习总结 安装Linux系统内容总结 一.学习"基于VirtualBox虚拟机安装Ubuntu图文教程& ...

  4. webpack的基础入门

    webpack的基础入门 这里对于 webpack 的基础入门进行一些总结,可以参考 github 上的 webpack-demo ,链接是 https://github.com/RealAndMe/ ...

  5. VIM操作基础命令

    VIM操作基础命令 1 文件操作 1.1 打开文件 VIM 使用 –o 或 –O 选项打开多个文件,其中 –o 表示垂直并排,例如 vim -o lesson4 lesson5 lesson6.大O表 ...

  6. SaltStack 在 Windows 上的操作基础

    SaltStack 在 windows上的操作基础 1.删除文件: salt '172.16.3.11' file.remove 'D:\downup\111.msu' 2.删除文件夹 salt '1 ...

  7. 【ABAP系列】SAP ABAP-模块 字符串操作基础知识

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP-模块 字符串操 ...

  8. ProBuilder快速原型开发技术 ---操作基础

    本篇文章笔者对ProBuilder(以下简称:PB),进行操作基础的介绍. 一:PB大小图标显示方式 PB操作面板有两种显示方式:小图标与大图标.大图标优点是显示清晰操作方便,缺点是没有更加精确的参数 ...

  9. vue-cli脚手架中webpack配置基础文件详解

    一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wep ...

随机推荐

  1. IAR for MSP430 关于添加自定义头文件的两种方法【转】

    前言:第一次接触这个软件,编译一个例程一直出现没有包含头文件的错误,在网上找了好几个方法都没什么效果,看到了篇文章,利用里面的方法1解决了,特此复制下来保存学习用. 原文链接:https://blog ...

  2. 百度url 参数详解全

    百度url解析Joe.Smith整理大全 百度url解析Joe.Smith整理大全...1 本文链接:http://blog.csdn.net/qq_26816591/article/details/ ...

  3. BA-siemens-insight_lenum点

    lenum点特性 lenum点有如下特点 如果状态字是自定义的,只能在bacnet / ip的aln层使用 如果想在ms/tp层使用lenum的功能,就必须将system profile中bacnet ...

  4. Python Study (05)装饰器

    装饰器(decorator)是一种高级Python语法.装饰器可以对一个函数.方法或者类进行加工.在Python中,我们有多种方法对函数和类进行加工,比如在Python闭包中,我们见到函数对象作为某一 ...

  5. BZOJ 4027: [HEOI2015]兔子与樱花 贪心

    4027: [HEOI2015]兔子与樱花 Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号 ...

  6. Swift - 使用CollectionView实现图片Gallery画廊效果(左右滑动浏览图片)

    1,效果图 (1)图片从左至右横向排列(只有一行),通过手指拖动可以前后浏览图片. (2)视图滚动时,每张图片根据其与屏幕中心距离的不同,显示尺寸也会相应地变化.越靠近屏幕中心尺寸就越大,远离屏幕中心 ...

  7. 2. Add Two Numbers[M]两数相加

    题目 You are given two non-empty linked lists representing two non-negative integers. The digits are s ...

  8. linux压缩(解压缩)命令详解

    一.tar命令          tar可以为文件和目录创建档案.利用tar,用户可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向档案中加入新的文件.tar 最初被用来在磁带上创 ...

  9. 抓取git的log文件批处理命令示例

    @echoset sincedate="2016-04-28 00:00:01"          ::变量set beforedate="2016-04-29 00:0 ...

  10. Git不需重复输入账号和密码的方法

    1. 打开 TortoiseGit 附带工具 Puttygen(PuTTY Key Generator)  C:\Program Files\TortoiseGit\bin\puttygen.exe. ...