Typescript + React 高仿 Antd 从零到一打造自己的组件库
时间:2020-03-07
本文章向大家介绍Typescript + React 高仿 Antd 从零到一打造自己的组件库,主要包括Typescript + React 高仿 Antd 从零到一打造自己的组件库使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Typescript + React 高仿 Antd 从零到一打造自己的组件库
const webpack = require('webpack') const path = require('path') const ExtractTextPlugin = require('extract-text-webpack-plugin'); //const { buildPlugins } = require('./src/keep/config/plugins') const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { // 我们应用的入口, 在 `src` 目录 (我们添加到下面的 resolve.modules): entry: { index: 'index.tsx', vendor: ['react', 'react-dom'] }, // 配置 devServer 的输出目录和 publicPath output: { filename: '[name].[hash:8].js', publicPath: '/', path: path.resolve('./dist'), chunkFilename: "[name].[hash:8].js", }, // 配置 devServer devServer: { port: 3000, historyApiFallback: true, inline: true, stats: { modules:false } }, // 告诉 Webpack 加载 TypeScript 文件 resolve: { // 首先寻找模块中的 .ts(x) 文件, 然后是 .js 文件 extensions: ['.ts', '.tsx', '.js', 'css', 'less'], // 在模块中添加 src, 当你导入文件时,可以将 src 作为相关路径 modules: ['src', 'node_modules'], }, module: { loaders: [ // .ts(x) 文件应该首先经过 Typescript loader 的处理, 然后是 babel 的处理 { test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/, include: path.resolve('src') }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader"] }) }, { test: /\.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "less-loader"] }) } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(),//热更 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV), }, }),//是否打包,初始化参数 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),//第三方库内容打包 new CleanWebpackPlugin('dist'),//清理打包文件夹 new ExtractTextPlugin("[name].[hash:8].css", { disable: false, allChunks: true, }),//样式文件配置 new HtmlWebpackPlugin({ template: './src/keep/index.html', hash: false, }),//模板文件配置 ], }
原文地址:https://www.cnblogs.com/itspcool/p/12436844.html
- HTTP协议报文结构及抓包报文分析示例
- 必备 .NET - C# 异常处理
- Java Socket获取本机的InetAddress实例
- 机器理解大数据秘密:聚类算法深度剖析
- BZOJ 3668: [Noi2014]起床困难综合症【贪心】
- 用C#实现字符串相似度算法(编辑距离算法 Levenshtein Distance)
- 51 Nod 1007 正整数分组【类01背包】
- 从入门到精通之Boyer-Moore字符串搜索算法详解
- 线性表的顺序存储结构的实现及其应用(C/C++实现)
- IPython使用学习笔记
- 如何用Python调用java程序
- LCT学习笔记
- 队列的存储结构的实现(C/C++实现)
- 栈的存储结构的实现(C/C++实现)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法