zoukankan      html  css  js  c++  java
  • Webpack搭建项目 Demo

    构建、打包工具简介:

    Gulp、Grunt、Browserify、Webpack、Rollup

    Gulp、Grunt: 构建流程管理工具,通过定义和执行任务的方式构建工作。如预编译语言的处理、模块打包、代码压缩等

    Browserify、Webpack、Rollup属于打包工具,把模块按照特定的规则合并到一起,使浏览器可执行  

    新建Webpack项目

    npm 包管理器 - 可以让DEV获取代码和分发代码的工具,如一些具有特定功能的工具或框架等。Javascript主流的包管理器: NPM、Yarn

    使用Npm之前应该 设置npm国内镜像 npm config set registry https://registry.npm.tabao.org

    步骤简介:

    1. npm Init ---- 初始化npm工程(类似于Maven、Gradle工程)。 产物 - package.json 这个文件主要是引入dependency、devdependency的功能
    2. 安装npm包。这里--save是要将依赖添加到 package.json的dependecy节点中。
    3. npm install typescript --save
    4. 安装webpack, webpack-dev-server等开发工具框架到Package.json的 devDependency中
    5. npm install webpack --save-dev

    6. npm install webpack-dev-server --save-dev

    7. webpackage的安装包被放在了 node_modules/.bin/webpack中。 可以使用Webpack提供的打包功能将ES6、Typescript的js文件打包到指定的文件中。
    8. node_modules/.bin/webpack app.js dist/bundle.js 
    9. 这时html中只要引用dist/bundle.js就可以了
    10. 有一个问题是随着文件的增多,打包可能变得很复杂。参数也可能变得不好记。 此时引入了webpack.config.js
      // entry 是整个webpack的根节点,webpack从根节点js文件能够找到其他的依赖。并能自动解决依赖
      // output 是输出的打包文件
      // devServer 启动的本地调试server,指定端口号以及本地打包文件的存放地
      const path=require('path');
      const webpack = require('webpack');
      
      module.exports={
          entry: './src/main.ts',
          output:{
              path: path.join(__dirname,'dist'),
              filename: 'bundle.js'
          },
          resolve:{
              extensions:['*','.ts','.js']
          },
          module:{
              loaders:[
                  {test:/.ts$/,loader: 'ts-loader'}
              ]
          },
          devServer:{
              port: 3001
          }
      };
      webpack.config.js

    11. 启动devServer,即node_modules/.bin/webpack-dev-server'。 浏览器中查看第9步中的html文件查看变更生效
    12. 进一步简化。devServer的启动、Webpack的打包工作。 即使用script的方式进行快捷操作. 在Package.json中新增 scripts 脚本。 将第8、12步webpack指令添加进去就可以了。 如下: 
    13. {
        "name": "webpack",
        "version": "1.0.0",
        "description": "",
        "scripts": {
          "test": "echo "Error: no test specified" && exit 1",
          
          "build": "node_modules/.bin/webpack",
          
          "server": "node_modules/.bin/webpack-dev-server --inline --colors --progress",
          "start": "cnpm run server"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "webpack": "^3.8.1",
          "webpack-dev-server": "^2.9.4"
        }
      }
      package.json

    配置eslint:

    https://github.com/xcatliu/typescript-tutorial/blob/master/ecosystem/eslint.md 

  • 相关阅读:
    oracle数据泵导入导出命令
    深入理解JVM—JVM内存模型
    JVM 内存初学 堆(heap)、栈(stack)和方法区(method)
    Java中Comparable和Comparator接口区别分析
    Java中的匿名内部类总结
    Git版本控制软件结合GitHub从入门到精通常用命令学习手册
    Git客户端图文详解如何安装配置GitHub操作流程攻略
    Java内部类详解
    Java类加载原理解析
    OracleDBconsoleorcl服务无法启动的原因及解决思路
  • 原文地址:https://www.cnblogs.com/ygshen/p/7897183.html
Copyright © 2011-2022 走看看