• Webpack配置及使用


    ##如何将js模块化
    ### module.exports()
    ### module.require()
    ### 自定义文件,进入时需要./
    ### npm下载得到文件,不需要./

    ##如果使用第三方
    ### 1,在npm服务器中下载第三方文件
    ### 2,require()引用第三方文件

    ## 如果将静态文件模块化
    ### 1,创建css文件
    ### 2,下载对应的加载器
    ### 3,修饰我们的css文件 !css-loader

    ##如何配置webpack.config.js
    ### 出口文件 入口文件 模块 加载器

    const path = require('path')
    module.exports={
      //文件入口配置项
      entry:'./scr/index.js',
      //出口文件的配置项
      output:{
        //输出的路径,用了nodejs
        path:__dirname,
        //出入文件的名称
        filename:'bundle.js'
      },
      //模块 :列入css,图片如何转换,压接
      module:{},
      //插件,用于生产模块和各项功能
      plugins:{},
      //配置webpack开发服务功能
      devserver:{
        //设置基本目录结果
        contenBase:__dirname,
        //服务器ip地址
        host:'localhost',
        //服务器压缩是否开启
       compress:true,
        //配置服务器端口号
        port:8082
      }
    }

    ##如果使用package.json启动项
    ### scripts "build" "start"
    ##如果将es6转换为es5
    ### babel babel-core babel-loader@7 babel-preset-es2015

    ##如何将app.vue文件>=转换成正常代码
    ### vue-loader@8.5.4 --save
    ##在vue文件中加载html,css,js
    vue-html-loader css-loader

    下载webpack本地版本
    npm i install webpack@3.6.0 --save

    配置webpack服务器版本 //在我们需要请求数据与服务器交互时使用
    npm i webpack-dev-server@2.8.0 --save-dev

    webpack@3.6.0和webpack-dev-server@2.8.0可以一块使用不会出现兼容问题

    删除webpack
    npm uninstall webpack -g
    加载webpack
    webpack app.js bundle.js
    加载webpack并监听
    webpack app.js bundle.js --watch
    下载css模块
    npm install css-loader style-loader -- save-dev
    babel   //使浏览器兼容es6的语法
    npm install babel-core babel-loader babel-preset-es2015 --save-dev

     ---------------------------------------------------------------------------------------------------------------------------------------------

    npm操作命令

    ##安装(推荐局部安装)
    npm install webpack -g //-g 代表全局安装
    npm install webpack -s //-s 代表局部安装

    #安装
    npm install --save-dev webpack -s

    #安装 webpack-cli
    npm install --save-dev webpack-cli -s //局部安装

    #创建backage.json文件
    npm init -y

    #安装 style-loader css-loader
    npm i style-loader css-loader -s
    #安装less的loader
    npm install --save-dev less less-loader -s
    #安装file-loader加载图片
    npm install --save-dev file-loader -s
    #安装url-laoder 加载字体
    npm install --save-dev url-loader -s
    #安装csv-loader xml-loader 加载数据(CSV、TSV 和 XML)
    npm install --save-dev csv-loader xml-loader -s

    #检查版本是否安装成功
    webpack -v

    ##删除
    #全局卸载
    npm uninstall webpack -g

    #局部卸载
    npm uninstall webpack -s

  • 相关阅读:
    全国疫情可视化地图(第三阶段)
    全国疫情可视化地图(第二阶段)
    JAVAWEB调用数据库显示图形化显示
    全国疫情可视化地图(第一阶段)
    第二周学习总结
    个人介绍及目前现状
    循环列表下练习循环子数组
    构建之法读书笔记(三)
    构建之法读书笔记(二)
    变叶木
  • 原文地址:https://www.cnblogs.com/tianranhui/p/9983997.html
Copyright © 2020-2023  润新知