zoukankan      html  css  js  c++  java
  • webpack入门

    webpack是一个前端资源加载/打包的工具,根据模块的依赖关系进行静态分析,并依据规则生成对应的静态资源。

    1、打包文件(index.js 打包到bundle.js)   

       webpack index.js bundle.js

    2、多文件打包 (js中引用其他的js) 

      导出 (str.js):module.export = "我是被包含的js文件"
      接收 (index.js):var str = require('./str.js');
      打包  -->  webpack index.js bundle.js,报错如下:--------------------------------------------------------------------------------------------------------------------------没解决

    3、webpak配置 - webpack.config.js文件,配置完成之后打包的命令即为 ‘webpack’ 

      

     4、安装第三方插件(jquery)

      安装 npm install jquery --save-dev

      使用 var $ = require('jquery')  $('#id').html('可以使用了。。。')

    5、服务端环境安装

      安装 npm webpack-dev-server --save-dev,将项目打包到服务端(不要webstorm打开浏览器访问),并可以指定端口,同时还可以配置启动命令

      配置package.json文件 'scripts' 对象

      1) 配置启动文件 -entey,输出文件 -output,使用 npm start 启用服务(默认8080)

      2) 'build' 替代 'webpak' 不再需要使用 webpack 进行编译,直接使用 build (npm run build) 即可编译,

      

      

      3) 如果不想一直build,则给 build 加检测 '--watch', 两个终端,一个检测 build(npm run build),一个启动端口(npm start)

      

       

      4) 如果需要修改端口,在 webpack.config.js 文件中修改, devServer : { port : 8081 }

      

      

      

      

  • 相关阅读:
    3.19 DAY2
    3.18 DAY1
    MySql Scaffolding an Existing Database in EF Core
    asp.net core 2.0 后台定时自动执行任务
    c#中枚举类型 显示中文
    fullCalendar使用经验总结
    Web APP 日期选择控件
    【转】剖析异步编程语法糖: async和await
    【转】Entity Framework 复杂类型
    【转】EF Code First 学习笔记:约定配置
  • 原文地址:https://www.cnblogs.com/slightFly/p/10563011.html
Copyright © 2011-2022 走看看