搭建webpack简易脚手架

栏目: 编程语言 · 发布时间: 5年前

内容简介:关键词本文是为下一篇《3分钟搞定 Vue + TypeScript开发》文章做的知识铺垫,文章结尾提供完整的github示例代码库。已经掌握vue开发的情况下,想体验一下TypeScript开发vue,可以通过以下过程配置一个脚手架。

关键词 vue typescript webpack

本文是为下一篇《3分钟搞定 Vue + TypeScript开发》文章做的知识铺垫,文章结尾提供完整的github示例代码库。

准备

已经掌握vue开发的情况下,想体验一下TypeScript开发vue,可以通过以下过程配置一个脚手架。

1.阅读webpack官网文档www.webpackjs.com/

  1. webpack工作原理
    • 入口起点(entry points)
    • 输出(output)
    • 模式(mode)
    • loader
    • 插件(plugins)
    • 配置(configuration)
    • 模块(modules)
    • 模块解析(module resolution)
    • 依赖图(dependency graph)
    • manifest
    • 构建目标(targets)
    • 模块热替换(hot module replace)

2.阅读TypeScript官网文档 www.tslang.cn/docs/home.h…

  1. 脚手架搭建了解辅导教程部分
    • 5分钟上手TypeScript
    • ASP.NET Core
    • Gulp
    • JavaScript迁移
    • React & Webpack

3.阅读Vue官网文档

  1. vue配置入门: cn.vuejs.org/v2/guide/in…

开始配置

npm < 5.x 建议升级到更高版本(当前稳定版本6.7.0), 或使用yarn来管理包

配置文件

  1. 完成准备工作后下面就要进行这3类文件的配置

    • package.json
    • webpack.config.js
    • tsconfig.json
  2. 配置思路,渐进式配置避免过程中问题堆积,先让脚手架工作起来

    • 首先要让webpack能运行起来
    • 安装Vue框架, 配置Vue、TS编译所需的loader和plugins

让webpack运行起来

这是一个使webpack能工作的最小配置。

当写好一个webpack配置, 从最简单的一步开始感受一下webpack, 建立亲切感往后就容易多了。

webpack配置文件:

/**
 * @file ./config/webpack.config.js
 * @author CharlesYu01
 */

module.exports = {
  entry: './index.ts',
  mode: 'production'
};
复制代码

编译执行结果:

$  webpack --config ./config/webpack.config.js
Hash: 067221c5690968574418
Version: webpack 4.29.0
Time: 86ms
Built at: 2019-01-26 14:05:49
  Asset       Size  Chunks             Chunk Names
main.js  930 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./index.ts 0 bytes {0} [built]
复制代码

可以看一下编译出来的内容,默认在./dist/main.js中。

ps:恩,你已经掌握了webpack最核心的玩法了,处理更复杂的工作时再去了解loader、plugins的原理。

用Vue+TS编写一个可浏览的页面

  • 安装插件
// package.json 
// TODO: 掌握各插件的作用
...
"devDependencies": {
	"awesome-typescript-loader": "^5.2.1",
	"html-webpack-plugin": "^3.2.0",
	"source-map-loader": "^0.2.4",
	"ts-loader": "^5.3.3",
	"typescript": "^3.2.4",
	"vue-class-component": "^6.3.2",
	"vue-loader": "^15.6.1",
	"vue-tsx-support": "^2.2.2",
	"webpack": "^4.29.0",
	"webpack-cli": "^3.2.1",
	"webpack-dev-server": "^3.1.14"
},
"dependencies": {
	"vue": "^2.5.22",
	"vue-property-decorator": "^7.3.0"
}
...
复制代码

webpack安装时如有异常,使用官网推荐方法 yarn add webpack --dev

  • 添加html入口文件

有了编译产出的js,还需要将js引入到页面中,此时使用webpack plugins配置一个插件 html-webpack-plugin , 就可以完成html页面引入js的功能。

  • 添加vue template 的编译能力 vue-loader

引用vue官网:

运行时 + 编译器 vs. 只包含运行时

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器,即完整版:

// 需要编译器
new Vue({
	template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
  render (h) {
	 return h('div', this.hi)
  }
})
// 配置webpack.config.js
module.exports = {
 resolve: {
   alias: {
	   'vue$': 'vue/dist/vue.esm.js'
	  }
   }
}	
复制代码
  • 添加一个可预览的webServer webpack-dev-server
devServer: {
  	contentBase: '../dist',
  	port: 9000
}

复制代码

验证结果

1.用TypeScript实现一个Input组件 /example/vue-tsx/Input.tsx

import {VNode} from 'vue/types';
  import Component from 'vue-class-component';
  import * as Vue from 'vue-tsx-support';
  import { Prop } from 'vue-property-decorator';

  export interface InputProps   {
  	placeholder: String
  }
  @Component
  export default class Input extends Vue.Component<InputProps,any> {
      [x: string]: any;
      text: any;
      input(e) {
          this.text = e.target.value
          this.$emit('input', e.target.value);
      }
      @Prop([String, Boolean]) value: string | boolean | undefined;
  
      data() {
        return {
          text: ''
        }
      }
          
      render() {
          return <input value={this.value} onInput={this.input}/>   
      }
  }
复制代码

2.引用组件

new Vue({
  template: '<div>组件<Input value="" @input="input"/>{{message}}</div> ',
  data:{
      message:'hello Vue!'
  },
  methods:{
      input:function(e) {
         this.message = e.target.value;  
      }
  }
  }).$mount('#app');
复制代码

3.预览

// 可以全量安装一次项目依赖
yarn install

yarn start
$ webpack-dev-server --config ./config/webpack.config.js
ℹ 「wds」: Project is running at http://localhost:9000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from ../dist
ℹ 「wdm」: Hash: 9bf165f80a4d3c7600c0
Version: webpack 4.29.0
Time: 2129ms
Built at: 2019-01-26 19:49:49
     Asset       Size  Chunks             Chunk Names
./index.html  409 bytes          [emitted]
   main.js    662 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi (webpack)-dev-server/client?http://localhost:9000 ./example/index.ts 40 bytes {main} [built]
  [./example/index.ts] 471 bytes {main} [built]
  [./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
  [./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
  [./node_modules/events/events.js] 13.3 KiB {main} [built]
  [./node_modules/html-entities/index.js] 231 bytes {main} [built]
  [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
  [./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
  [./node_modules/url/url.js] 22.8 KiB {main} [built]
  [./node_modules/vue/dist/vue.esm.js] 289 KiB {main} [built]
  [./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 7.78 KiB {main} [built]
  [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
  [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
  [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
  [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
      + 15 hidden modules
  Child html-webpack-plugin for "index.html":
       1 asset
      Entrypoint undefined = ./index.html
      [./node_modules/html-webpack-plugin/lib/loader.js!./example/index.html] 618 bytes {0} [built]
      [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
      [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
      [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
  ℹ 「wdm」: Compiled successfully.

复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Head First JavaScript程序设计

Head First JavaScript程序设计

[美]Eric T. Freeman、[美] Elisabeth Robson / 袁国忠 / 人民邮电出版社 / 2017-9 / 129.00 元

本书语言和版式活泼,内容讲解深入浅出,是难得的JavaScript入门书。本书内容涵盖JavaScript的基本知识以及对象、函数和浏览器文档对象模型等高阶主题。书中配备了大量有趣的实例、图示和练习,让读者轻轻松松掌握JavaScript。一起来看看 《Head First JavaScript程序设计》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码