zoukankan      html  css  js  c++  java
  • webpack

    Webpack 3.8.1版本

      是一个前端资源加载或者打包工具。资源 img css js json 等

    第一步 :下载

        npm install webpack@3.8.1 全局下载

        npm install webpack@3.8.1 -save -dev 局部下载  

        

        全局和局部尽量都安装

    第二步:打包js文件

      指令webpack 入口文件(被打包文件) 出口文件(打包文件)

      webpack js/a js dist/bundle.js

      如果我们只想使用webpack这个指令 就完成打包需要配置webpack.config.js

      webpack会有一个默认的配置文件的路径叫webpack.config.js

      

    第三步:

      添加热加载改变文件内容 按住保存 就会自动刷新

      webpack-dev server@2.9.4

      注意webpack是3.8.1这个轻量服务器就得是2.9.4 

      如果是4.0版本这个dev-server就得是3.0版本

      dev-server始终比webpack低一个版本

      全局下载 webpack-dev-server npm install -g webpack-dev-server@2.9.4

      在开发环境下 npm i webpack-dev-server@2.9.4

      直接使用webpack-dev-server 启动就行

      但是这种启动只是启动服务器 但是不能自动刷新

      另一种方法 webpack-dev-server --hot -inline

      既可以启动服务器 也可以让浏览器自动刷新

      配置启动指令

        在当前项目下的package.json中将

        "script":{webpack-dev-server --hto --inline}

        注意的就是这个服务器下生成的虚拟bundle.js

        这个虚拟js文件由配置文件决定。但是他是和app.html同目录级别关系所以引入

    第四步:打包css文件

      loader:依赖包

        css转成js less转成js

        json转成JS png转成JS而loader就解决了这些问题

        css文件打包到js文件中需要style-loader!css-loader

        npm install style-loader css-loader --save -dev

          

  • 相关阅读:
    根据某字符(字符串)分割字符串
    call函数心得
    Git之常用命令
    ES6之async与await
    CSS之 sass、less、stylus 预处理器的使用方式
    JavaScript之继承
    vue之keep-alive的使用
    CSS之单行、多行文本溢出显示省略号
    Vue之 watch、computed、filter之间的区别与使用场景
    Vue之watch监听对象中某个属性的方法
  • 原文地址:https://www.cnblogs.com/y123/p/10975667.html
Copyright © 2011-2022 走看看