安装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来惊醒转化
配置webpack和运行webpack
2在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能够处理js文件之间的互相依赖关系
webpack能够处理js的兼容性问题 能装将es6的语法转化为es5的语法
我们可以发现引入jquery的两种方式
const $=require("Jquery")
import $ from 'jquery'