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 }

      

      

      

      

  • 相关阅读:
    Codeforces Round #352 (Div. 1) B. Robin Hood (二分)
    Codeforces Round #209 (Div. 2) D. Pair of Numbers (模拟)
    Kattis
    kattis Curious Cupid (莫队算法)
    HYSBZ
    SPOJ NETADMIN
    day26-2 基于TCP协议的套接字编程
    day26-1 TCP三次握手和四次挥手
    day25-2 OSI协议和socket抽象层
    day25-1 网络架构与互联网组成
  • 原文地址:https://www.cnblogs.com/slightFly/p/10563011.html
Copyright © 2011-2022 走看看