前端开发流行工具Webpack

web前端开发怎么学知乎
怎么进4399前端开发
前端开发中怎么处理缓存
  • 优点:
  • 大小100k+ 压缩以后的文件只有70k, 所以适合移动站点的开发
  • 有网站的中文文档,扩展包也是中文文档,学习入门快 官方文档
    #####项目中主要使用的Vuejs技术

    • webpack
    • 利用vue-resource 来请求api
    • 利用vue-router来实现路由
    • 利用vue中的组件化思想来实现每个页面
    • 整个项目属于单页
      #####webpack介绍
    • webpack就是一个资源打包工具,它可以将css,js,image,less,sass,vue等等文件当做一个模块来进行打包处理,最终将这些资源输出到一个统一的.js文件中,将来在系统中只需要请求这个打包好的.js文件即可完成所有的功能
    • 为什么选择webpack
    • vuejs官方脚手架工具中就使用了webpack模板
    • 对所有的资源会做压缩等优化操作(对图片,cssjs自动进行压缩)
    • 它在开发过程中提供了一套完整的功能,能够使开发变得高效(修改代码 浏览器无需刷新 可直接看到效果)
      #####webpack使用
    • 官方文档
    • webpack基本打包演示步骤
    • 将webpack安装成为全局包 npm install webpack -g
    • 在项目中shift+鼠标右键 打开命令窗口
    • 在cmd控制面板中 调用webpack指令给定两个参数 要打包的文件路径 要输出的文件路径
      例如:webpack main.js build.js
    • 什么是npm
    • https://www.npmjs.com/ 这个网站存储了很多nodejs的第三方功能包
    • 利用npm这个工具可以将nodejs第三方包通过相关指令进行安装,例:npm install webpack -g
    • 只要安装好了nodejs.exe这个软件,就自动安装好了npm这个包
    • /注意/
      + 由于npm工具自动去查找国外的网站下载包,可能会被防火墙屏蔽而下载不了
      + 解决方案:安装淘宝的cnpm包来代替npm安装包
      + 安装cnpm:npm install cnpm -g
      + 接下来就可以利用cnpm来替代npm
      - cnpm指令
      + cnpm install 安装包
      + cnpm uninstall 卸载包
      + cpnm init 自动生成package.json文件
      #####webpack打包计算器功能


      cal.js
      function add(x,y){
      return x + y;
      }
      // 模块导出
      module.exports = {
      addFun : add //相当于对象
      }


      main.js
      // webpack基于nodejs来运行的,所以require等语法就可以被识别了
      var calcExports = require(“./calc.js”);
      console.log(calcExports.addFun(1,2));


      生成build.js
      // 1.利用webpack将main.js打包,自动将main.js中依赖的模块都进行打包 (shift+右键—在此处打开命令窗口–webpack main.js build.js–项目中生成build.js–运行)
      // 2.将webpack打包好的生成以后的build.js来放到浏览器中运行

      #####webpack结合配置文件打包计算器功能
      // 这个文件就是webpack的默认配置文件,默认的名称为:webpack.config.js
      // 将来只需要在cmd面板上执行webpack就会自动去查找webpack.config.js中的内容进行相关的打包操作

      webpack.config.js配置文件
      module.exports = {
      [color=#a5a5a5]//webpack要打包的源文件

      entry:”./main.js” ,
      output:{
      // 打包以后输出的文件名称
      filename:”./build.js”
      }
      }[/color]
      //shift+右键—在此处打开命令窗口–webpack–项目中生成build.js–运行
      #####相对路径和绝对路径
      ./ 当前目录
      ../ 父级目录
      / 根目录
      #####利用webpack打包css
      +了解知识点:
      - webpack本身不支持css打包,他其实是加载相关的loader来进行不同文件的打包处理,想要打包css,就必须依赖style-loader和css-loader
      +操作步骤:
      -0.利用cnpm init在项目生成一个package.json文件(通过0和1步骤的优点:假如要把此项目发给别人,则可以删除掉node_modules文件夹,因为package.json中有配置,所   以对方只需要执行npm.install即可下载整个node_module包)
      -1.利用npm安装好style-loader和css-loader(npm install style-loader css-loader --save)
      -2.在webpack.config.js中配置一下style-loader和css-loader,顺序不能乱style-loader再css-loader
      -3.调用webpack即可查看结果
      +autoprefixer-loader

    • 作用:可以在自动打包的过程中将css写法加上不同浏览器内核的前缀达到不同浏览器的兼容
    • 使用步骤:
      • 1.安装cnpm install autoprefixer-loader –save-dev
      • 2.在webpack.config.js的css设定loader的地方,增加autoprefixer-loader的字符即可完成
      • 注意点:autoprefixer-loader 必须放到css-loader和style-loader后面
      • 3.在cmd中执行webpack打包
        #####利用webpack打包less
        步骤:
    • 1.安装less-loader 而less-loader依赖于less所以要安装less (cnpm install less-loader less –save-dev)
    • 2.在webpack.config.js中添加上.less对于less-loader这个包
      *****注意点:其中less-loader 只是将.less文件编译成正常的css代码,那么这个时候webpack想要编译正常的css代码,还需要借助于css-loader和style-loader,所以在配置上一定要将css-loader,style-loader,less-loader一起配置好才有效果
    • 3.在main.js文件中使用require(”./site.less”)才能被webpack查找并打包
    • 4.执行webpack指令完成打包

#####利用webpack打包sass
步骤:
+1. 要安装的包sass-loader依赖 node-sass ( cnpm install sass-loader node-sass –sace-dev)

  • 2.在webpack.config.js中添加上.sassss对于sass-loader这个包
  • 3.在main.js文件中使用require(”./site.scss”)才能被webpack查找并打包
  • 4.执行webpack指令完成打包

#####利用webpack打包图片和字体图标
步骤:

  • 1.安装url-loader file-loader ( cnpm install url-loader file-loader –save-dev )
    1. 将url-loader配置到webpack.config.js文件,
      {
      test:/.(png|jpg|ttf)$/,
      loader:’url-loader?limit=40000′ //limit 40000表示 如果图片的大小小于40kb,则将这张图片编译成base64传给浏览器使用,否则将图片打包到编译文件夹中(图片大小不变),limit的这个值不能太大,否则会导致build.js这个文件过大,影响性能
      }

总结: url-loader主要是用来解析css中的url()中的相关文件的,那么这些文件的扩展名称一定要配置在webpack.config.js中才能正常解析。
#####整理划分项目文件

  • dist文件夹 存放webpack打包以后的文件 例如build.js >40kb的图片 c959a964d8d8270514e2057aab003575.png
  • src存放源文件 例如 calc.js main.js
  • statics 存放静态资源文件 css js images
  • 模板index.html package.json webpack.config.js 放在文件夹的第一级
    #####利用webpack-dev-server和html-webpack-plugin实现页面刷新和自动打包
    步骤:

    • 1.cnpm install webpack webpack-dev-server –save-dev 也可以再安装一次全局cnpm install webpack-dev-server -g (webpack-dev-server依赖于webpack所以都要安装 )
    • 2.安装html-webpack-plugin 可以实现自动生成一个index.html页面在内存中,只有这样,webpack-dev-server才能保证页面的实时刷新和实时打包 cnpm install html-webpack-plugin –save-dev
      生成的index.html会自动注入build.js 所以 模板文件index1.html页面中的build.js可以不写

      • 3.配置webpack.config.js
        • 在webpack.config.js最上方导入包
  • 4.在package.json中配置dev
    1. 在项目根目录下打开cmd面板执行npm run dev 即可完成自动打开浏览器,并且实现自动刷新
      webpack-dev-server 相关参数:
      — inline 自动刷新
      — hot 热加载
      — port 指定监听端口为5200
      — open自动在默认浏览器中打开
      — host 可以指定服务器的ip, 不指定默认为127.0.0.1(localhost)

#####利用babel-loader将es6语法转换成es5语法

  • 浏览器不识别es6语法(Unexpected token import) 所以要转成es5
    步骤:
  • cnpm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime –save-dev (es6===es2015 babel-preset-es2015转码器)
  • 在webpack.config.js中的loaders:[] 中配置参数
  • 在webpack.config.js中配置参数babel
dw怎么做web前端开发
ico在前端开发中怎么用
前端开发怎么让各大浏览器兼容
» 本文来自:前端开发者 » 《前端开发流行工具Webpack》
» 本文链接地址:https://www.rokub.com/8123.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!