02-webpack的基本配置-运行webpack

安装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'

02-webpack的基本配置-运行webpack

猜你喜欢