1安装webPack的方式
第一次全局安装 npm i webpack -g 第一次安装了之后以后就不需要在安装了
在项目根录中运行 npm i webpack --save-dev 安装到项目依赖中去
ps=》dist 目录 代表的是产品级的目录 直接给用户
语法 ul>li*10{这是第$li} 这是一种快的语法
2 做一个各行变色的功能有4步骤

         安装包描述文件  npm init -y  新版本的node会自带这个的

         npm i jquery -S 安装jq 保存到依赖列表中去了   在E:\vuekaifa\lib\05day-webpack-隔行变色>这个目录中去

         05day-webpack-隔行变色目录下==》新建src目录 在src目录下 新建index.html文件 在src目录下新建mian.js文件

         src目录下创建 imgs文件夹 和js文件夹

         05day-webpack-隔行变色目录下==>创建dist目录

         在mian.js文件中导入jq   导入的语法是  import **  from    **它是es6中导入模块的方式
1 如 import $ from 'jquery' 注意大小写
从引入文件可以知道 首先是在自己的兄弟目录中去找 然后去父级目录的兄弟目录中去找 然后依次类推 下载cnpm i jquery -S // 实现隔行变色的功能
$(function(){
$("li:odd").css("background","red")
})
在node.js中 你要是这样写的 const $=require("Jquery") 由于es6的import导包的方式台高级了 所以浏览器解析不了 所以import $ from 'Jquery'汇报错
所以需要webpack来惊醒转化

配置webpack和运行webpack

  3在src下创建webpack.config.js文件配置如下

              module.exports={
entry:path.join(__dirname,'./mian.js'), //入口文件 使用webpack要打包哪一个文件
output:{ //输出相关的配置
path:path.join(__dirname,'./dist'), //指定打包好的文件会输出到哪一个目录(dist)下去
// filename:"testindex.js" //指定打包好的文件的名称叫什么名字
}
} 3所以在index中的时候我们就引入被webpack编译好的js文件就可以了
<script src="../dist/testindex.js"></script> 4运行webpack 转化的语法是 webpack ./被编译的文件路径 ./新文件的路径 这是webpack运行的命令(重点) webpack ./src/mian.js ./dist/testindex.js 在dist中被编译的文件是为testindex.js

如果你已经向上面这样配置了  可以直接webpack哦  因为已经配置好了

  webpack 能够处理的问题
webpack能够处理js文件之间的互相依赖关系
webpack能够处理js的兼容性问题 能装将es6的语法转化为es5的语法

我们可以发现引入jquery的两种方式

 const $=require("Jquery")

import $ from  'jquery'
												

02-webpack的基本配置-运行webpack的更多相关文章

  1. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  2. webpack 4.0 配置方法以及错误解决

    选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...

  3. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  4. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  5. 优化单页面开发环境:webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  6. vue-cli的webpack模版项目配置解析-build/dev-server.js

    我们在使用vue-cli搭建vuejs项目(Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目)的时候,会自动生成一系列文件,其中就包含webpack配置文件.我们现在来看下,这些配置到 ...

  7. Webpack的基本配置

    一.优化项目结构,创建相关的文件,项目结构如下:src文件夹存放相关js文件,index.html项目的首页面,dist文件夹是webpack 打包 目录. index.js内容为: alert('我 ...

  8. storybook配置之基本配置和webpack配置

    默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其 ...

  9. webpack 4.0配置

    webpack一般是本地安装,一般安装webpack webpack-cli,一般是开发依赖上线的时候不需要打包通常npm install webpack webpack-cli  -D安装 安装的时 ...

随机推荐

  1. [20191106]善用column格式化输出.txt

    [20191106]善用column格式化输出.txt # man columnDESCRIPTION     The column utility formats its input into mu ...

  2. Apriori关联分析详解

    ------------恢复内容开始------------ 一. Apriori关联分析概述 选择物品之间的关联规则也就是要找出物品之间的关系,要找到这种关系有两步 找出频繁一起出现的物品集的集合, ...

  3. Spring Batch基本概念

    Spring batch主要有以下部分组成: JobRepository     用来注册job的容器 JobLauncher             用来启动Job的接口 Job           ...

  4. [题解向] Manacher简单习题

    \(1\) LG1659 [国家集训队]拉拉队排练 求前\(k\)大的奇数长度回文串的长度之积. \(\rm |S|\leq 1e6,K\leq 1e12\) --一开始觉得挺水,就开始二分最少长度能 ...

  5. 【微信小程序】mpvue中页面之间传值(全网唯一真正可行的方法,中指推了一下隐形眼镜)

    摘要: mpvue中页面之间传值(注意:是页面之间,不是组件之间) 场景:A页面跳转B页面,在B页面选择商品,将商品名带回A页面并显示 使用api: getCurrentPages step1: A页 ...

  6. 基于Django的Rest Framework框架的解析器

    本文目录 一 解析器的作用 二 全局使用解析器 三 局部使用解析器 四 源码分析 回到目录 一 解析器的作用 根据请求头 content-type 选择对应的解析器对请求体内容进行处理. 有appli ...

  7. ViewTool Hollong BLE Sniffer Support Linux OS Introduction

    ViewTool Hollong BLE Sniffer Support Linux OS Introduction 1. Download Software:http://www.viewtool. ...

  8. C语言程序设计100例之(12):Eratosthenes筛法求质数

    例12   Eratosthenes筛法求质数 问题描述 Eratosthenes筛法的基本思想是:把某范围内的自然数从小到大依次排列好.宣布1不是质数,把它去掉:然后从余下的数中取出最小的数,宣布它 ...

  9. 防止ssh暴力破解的小工具denyhosts

    DenyHosts 简介 DenyHosts 是 Python 语言写的一个程序软件,运行于 Linux 上预防 SSH 暴力破解的,它会分析 sshd 的日志文件(/var/log/secure), ...

  10. Kubernetes容器集群 - harbor仓库高可用集群部署说明

    之前介绍Harbor私有仓库的安装和使用,这里重点说下Harbor高可用集群方案的部署,目前主要有两种主流的Harbor高可用集群方案:1)双主复制:2)多harbor实例共享后端存储. 一.Harb ...