<!--
安装webPack的两种方式
第一次全局安装 npm i webpack -g 第一次安装了之后以后就不需要在安装了
在项目根录中运行 npm i webpack --save-dev 安装到项目依赖中去
ps=》dist 目录 代表的是产品级的目录 直接给用户
语法 ul>li*10{这是第$li} 这是一种快的语法
-->
<!--
做一个各行变色的功能有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来惊醒转化
2在src下创建webpack.config.js文件配置如下
module.exports={
entry:path.join(__dirname,‘./mian.js‘), //入口文件 使用webpack要打包哪一个文件
output:{ //输出相关的配置
path:path.join(_dirname,‘./dist‘), //指定打包好的文件会输出到哪一个目录（dist)下去
// filename:"bundle.js" //指定打包好的文件的名称叫什么名字
}
}
3所以在index中的时候我们就引入被webpack编译好的js文件就可以了
<script src="../dist/testindex.js"></script>
4转化的语法是 webpack ./被编译的文件路径 ./新文件的路径 这是webpack运行的命令
webpack ./src/mian.js ./dist/testindex.js 在dist中被编译的文件是为testindex.js
webpack 能够处理的问题
webpack能够处理js文件之间的互相依赖关系
webpack能够处理js的兼容性问题 能装将es6的语法转化为es5的语法
E:\vuekaifa\lib\05day-webpack-隔行变色> webpack ./src/main.js ./dist/yasuomain.js
Hash: 4cc4695e15064bd19a6f
Version: webpack 3.8.1
Time: 344ms
Asset Size Chunks Chunk Names
yasuomain.js 284 kB 0 [emitted] [big] main
[0] ./src/main.js 87 bytes {0} [built]
+ 1 hidden module
-->
<!--
如何实现时时跟新我写的代码 此时就需要有一个配置文件了 webpack.config.js这个文件 这个文件是在跟目录下哦
webpack是基于node去构建的 所以你的依法和node还是很相似的哦
在配置文件中需要手动的指定配置文件的入口和出口
-->
<!--
wabpack.config.js文件最基本的配置哦 文件在跟目录下哦
// 因为要对路径操作 所以你要引入path这个模块哦 对他进行操作哦
const path=require("path"); //路径模块
// 配置文件 暴露出去哦 // 手动的指定入口和出口
module.exports={
entry:path.join(__dirname,‘被打包的文件.js‘), //入口文件 使用webpack要打包哪一个文件
output:{ //输出相关的配置
path:path.join(__dirname,‘./dist‘), //指定打包好的文件会输出到哪一个目录（dist)下去
filename:"bundle.js" //指定打包好的文件的名称叫什么名字
}
}
当你配置好了之后 直接在 E:\vuekaifa\lib\05day-webpack-隔行变色>webpack 输入webpack就行了 它就会自动帮你打包
此时还不行 你还需要写后面的代码 看12章
-->
<!-- 如何添加npm run dev 启动程序
下载npm i webpack-dev-server -S 在pack.json中添加 "dev": "webpack-dev-server"这一句 注意使用逗号隔开
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server" //添加这一句
},
本节实现的功能==》手动修改成自己想要的端口号 2并且自动打开浏览器哦
下载 npm i webpack-dev-server -S
在package.json中修改
将“script”:{ "dev":"webpack-dev-server --open --port 3000"}
解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000
-->
<!-- 本节实现的功能==》
我们发现启动之后展示的不是一个具体的首页 而是一个目录 如何解决启动之后是一个具体的首页
将“script”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"} 这里有4个指令
解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000 --contentBase src 以src为根目录 展示它里面的index.html这个文件
--hot实现局部的跟新 你修改了哪里就跟新哪里 效率跟高了 它能够实现网页不重载(那个圈圈不会刷新) 就可以实现页面跟新
-->
