搭建typescript_Webpack4+React+Typescript搭建开发环境

2018.10.27补充

1.新增url-loader，解决引用背景图片时产生的bug，

1. img片404解决：如

············································································

1.先看下目录结构

2.首先，初始化package.json,运行npm init，这个不用多说

3.在根目录新建webpack.config.js文件

//创建基本的出入口

modules.exports = { //模式:开发模式 mode:"development" entry: path.join(__dirname, './src/index'), //入口 output: { //出口 filename: '[hash].bundle.js', path: path.resolve(__dirname, './dist') }, module:{  } }

接下来配置webpack的模块module,这些选项决定了如何处理项目中的不同类型的模块。

重点配置一下module.rules选项，这个能够对模块(module)应用 loader，或者修改解析器(parser)。

module.rules是个数组

modules.exports = { module:{ rules:[ //ts-loader 用来解析ts文件 //需要安装以下依赖 //npm install ts-loader --save-dev //npm install typescript --save-dev //安装react相关依赖 //npm install --save-dev react react-dom @types/react @types/react-dom { test: /.tsx?$/, exclude: /node_modules/,//不解析node_modules loader: 'ts-loader' }, //加载json，png等文件 //安装npm install --save-dev file-loader { test: /.[(png)|(obj)|(json)]$/, loader: "file-loader"  }, //加载css //安装npm install --save-dev css-loader //npm install style-loader --save-dev { test: /.css$/, use: ['style-loader', 'css-loader'] }, ] } } 如果需要使用.less,或者在家字体文件，配置相关的loader，每个loader都有丰富的配置选项，可以研究一下按需配置 接着是resolve选项，这些选项能设置模块如何被解析。 方便的比如alias选项，它可以该import，require设置别名，应用官网例子如下 module.exports = { //... resolve: { alias: { Utilities: path.resolve(__dirname, 'src/utilities/'), Templates: path.resolve(__dirname, 'src/templates/') } } };

现在，替换「在导入时使用相对路径」这种方式，就像这样：

import Utility from '../../utilities/utility';修改为别名import Utility from 'Utilities/utility';

最关键的我觉得还是extensions 选项,自动解析确定的扩展

modules.exports={ resolve: { //下面后缀的文件导入时可以省略文件名，js必须要有，否则会react.js文件会无法被解析 extensions: [".ts