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", ".tsx", ".js"]
},
devtool: 'source-map', //调试工具，不同模式构建速度不同，source-map适合生存环境，开发环境用eval-source-map
//安装依赖
//npm install --save-dev webpack-dev-server
devServer: {
//告诉服务器从哪个目录中提供内容。只有在你想要提供静态文件时才需要
contentBase: path.resolve(__dirname, "dist"),
compress:true, //是否压缩
port:8080, //端口号
host:'0.0.0.0', //外部服务器可以访问
open:true //是否运行时打开浏览器
},
plugins: [
//该插件将为你生成一个HTML5文件，其中包括使用script标签的body中的所有webpack包
//安装npm install --save-dev html-webpack-plugin
new HtmlWebpackPlugin({
title: '标题',//用于生成的HTML文档的标题
template: './index.html', //默认index.html位置
})
]
}


package.json相关配置

"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},

tsconfig.json配置

{
"compilerOptions": {
"jsx": "react",
"lib": ["es6", "dom"],
"rootDir": "src",
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"moduleResolution": "node",
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true
},
"include": [
"./src"
],
"exclude": [
"node_modules",
"build"
]
}

index.html

index.tsx

import * as React from "react"
import * as ReactDOM from "react-dom"
ReactDOM.render(


运行npm run dev即可运行，默认打开localhost：8080;

以上是开发环境教程，其中还有更加丰富的功能插件和配置需要按需添加配置
网站的webapack代码如下

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.join(__dirname, './src/index'),
output: {
filename: '[hash].bundle.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true,
}
},
{
test: /\.[(png)|(obj)|(json)]$/,
loader: "file-loader"
},
//样式加载 css
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
//解析url
{
test: /\.(woff|woff2|jpg|png)$/,
use: {
loader: 'url-loader',
options: {
name: 'imanges/[hash].[ext]',
limit: 5000,
mimetype: 'application/font-woff'
}
},
//样式加载 less
{
test: /\.less$/,
use: [{
loader: "style-loader"
},
{ loader: 'css-loader', options: { sourceMap: false } },
{
loader: "less-loader",
options: {
strictMath: true,
noIeCompat: true
}
}
]
},
]
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
devtool: 'source-map',
devServer: {
contentBase: path.resolve(__dirname, "dist"),
compress:true,
port:8080,
host:'0.0.0.0'
},
plugins: [
// new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Zoe',
template: './index.html',
})
]
};

附：接下来将发布怎么搭建个人网站。。。。