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. Java基础学习总结(60)——Java常用的八种排序算法

    1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数--直 ...

  2. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  3. Unity3D中C#和JS的方法互相調用

    因为Unity3D中一些腳本的方法仅仅能用在JS中.在C#中是無效的,而C#能够與服務器端通訊,JS本身卻不行.所以勢必會遇到這兩種語言腳本中方法的互相調用,下面是演示样例. 兩個文件 test1.j ...

  4. boost::tuple 深入学习解说

    #include<iostream> #include<string> #include<boost/tuple/tuple.hpp> #include<bo ...

  5. Qt Installer Framework的学习(三)

    Qt Installer Framework的学习(三) Qt Installer Framework的样例中.通常是这种:config目录一般放了一个config.xml文件,包括的是安装配置xml ...

  6. UI_KVC赋值

    使用KVC对person的属性进行赋值 [aperson setValue:@"yadong" forKey:@"name"]; [aperson setVal ...

  7. 0x22 迭代加深

    poj2248 真是个新套路.还有套路剪枝...大到小和判重 #include<cstdio> #include<iostream> #include<cstring&g ...

  8. WebBrowser网页操作之提取获取元素和标签(完整篇)

    最近使用WebBrower做了几个Hook小程序,收集积累如下: using System; using System.Collections.Generic; using System.Linq; ...

  9. [SCOI 2007] 排列

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1072 [算法] 状压DP [代码] #include<bits/stdc++. ...

  10. ubuntu下Chrome谷歌浏览器部分网站图片显示不正常的解决方法

    title: ubuntu下Chrome谷歌浏览器部分网站图片显示不正常的解决方法 toc: false date: 2018-09-02 14:37:26 categories: methods t ...