webpack + ts 项目的初始化
2019-12-17 第一次更新----------------------------------------------------------
1.大的环境配置，git node webpack 等等的一些插件全局安装，一般国内使用npm下载（服务器架设在国外）会有一些网络问题，可以使用淘宝镜像代理，但是不建议这么做，因为淘宝镜像下载依赖经常出现各种各样的奇葩问题，总之可以用npm的话就不用cnpm（淘宝镜像）。这些东西下载的话可以自行百度（一大堆），这里就不详述了。
2.进入项目目录文件夹，一般来说这时候是一个空的文件夹。
运行 npm init -y 或者 npm init 前者更省事儿一点。
3.运行 npm install -D webpack 在项目目录下安装webpack，同时高版本的webpack还需要 安装webpack-cli，安装方法与前面类似。
4.在项目根目录文件夹下创建一个webpack.config.js文件（这里给出一份基础的配置内容）：
module.exports = { mode: 'development', //入口 entry: __dirname + '/src/index.ts', //出口 output: { path: __dirname + '/dist', filename: 'bundle.js', }, module: { rules: [ { test: /\.tsx?$/, use: { loader: 'ts-loader' } }, ] }, resolve: { extensions: [".ts", ".js"], alias: { "@": __dirname + "/src", // "@component": __dirname + "src/component", // "@pages": __dirname + "src/pages", // "@utils": __dirname + "src/utils", }, } }
5.在上述配置文件中可以看到我们使用了TS（typescript）依赖，首先需要下载依赖：
npm install -D typescript ts-loader 。其次，再在webpack.config.js中做出配置（这里我直接先展示了配置好的文件）。
6.接下来需要在项目根目录文件夹中创建tsconfig.json文件，这里同样提供一份基础的ts打包配置文件：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "module": "commonjs", "target": "es5", "sourceMap": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "allowJs": true, }, "include": [ "src/ts/*", "src/*" ], "exclude": [ "node_modules", "dist" ] }
7.至此，包含一个入口一个出口，可以使用ts编程的基础框架就做好了，如果需要打包html、css文件，需要下载和配置额外的依赖。附一张目前为止的项目文件目录结构：
附：有关webpack打包的快捷命令设置（在package.json文件中）：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --mode development", "build": "webpack --mode production" }
配置完成后，可以使用npm run dev 以及 npm run build 做开发环境/生产环境的打包设置。
（手懒 + 技术菜 + 随便写写，随缘更新了。）
2020-03-31 第二次更新----------------------------------------------------------
8.webpack热更新：
npm install babel-preset-es2015 --save-dev
安装babel并在项目根目录创建.babelrc文件，初始配置：{"presets": ["es2015"]}
安装webpack-dev-server：npm install webpack-dev-server --save-dev
在package.json中修改script部分的脚本如下：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --mode development && webpack-dev-server --progress --colors", "build": "webpack --mode production" }
如上代码，在运行dev时加了webpack-dev-server --progress --colors
的热更新相关命令。此时再改变src中的工程代码，npm就会执行自动打包。（绑定一个小型的express服务器到localhost:8090，来为你的静态资源及bunble（自动编译）服务。）但是到目前为止，index.html还是个本地文件，怎么生成一个服务器上的Index.html文件呢？
1）安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
2)配置html-webpack-plugin
修改webpack.config.js为如下:
const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: 'development', //入口 entry: __dirname + '/src/index.ts', //出口 output: { path: __dirname + '/dist', filename: 'bundle.js', }, module: { rules: [ { test: /\.tsx?$/, use: { loader: 'ts-loader' } }, ] }, resolve: { extensions: [".ts", ".js"], alias: { "@": __dirname + "/src", // "@component": __dirname + "src/component", "@pages": __dirname + "/src/pages", // "@utils": __dirname + "src/utils", }, }, devServer: { inline: true, port: 8080, }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new webpack.HotModuleReplacementPlugin() ] }
主要是增加了plugins配置以及该配置相关的依赖引入。
9.引入react相关依赖
（现如今做前端，最基础的就是三大框架得会一个了吧，不然面试的时候可咋说~那么在webpack项目中如何使用react框架进行项目编写呢？）
1）第一步当然是下载相关的依赖包了：
npm install --save react react-dom
2）接下来就是修改各种配置了：
从tsconfig.json配置开始，首先需要在tsx文件里头支持jsx，然后需要配置编译过程中需要引入的库文件的列表（老实说，不太明白这个配置的意义，但是不配它就报错呀~），同时在原来的基础上优化了编译的包含目录（只是写法改变，包含不变）。上代码（这次我对一些改变的配置做了注释，写代码打注释是个好习惯）：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@pages/*": ["src/pages/*"] }, "module": "commonjs", "target": "es5", "jsx": "react", //在tsx文件里支持jsx "sourceMap": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "allowJs": true, "lib": ["es2015", "dom", "es2015.promise"], //编译过程中需要引入的库文件的列表 }, "include": [ "src/**/*" //编译包含在 src及其子目录下的所有匹配的文件 ], "exclude": [ "node_modules", "dist" ] }
再接下来是webpack.config.js文件配置的修改：首先修改入口为index.tsx，同样的文件名称也要从index.ts变成index.tsx，这么做是因为react就是jsx语法嘛~；之后，resolve里头的extensions配置数组也需要添加.tsx文件类型。这样基本就ok了。上代码（老实说，每次改一丢丢都把完整的配置贴出来，这在编程里叫什么，冗余~但是便于阅读理解，没有想到更好的办法之前就这样了）：
const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); // const Merge = require("webpack-merge"); module.exports = { mode: 'development', //入口 entry: __dirname + '/src/index.tsx', //出口 output: { path: __dirname + '/dist', filename: 'bundle.js', }, module: { rules: [ { test: /\.tsx?$/, use: { loader: 'ts-loader' } }, ] }, resolve: { extensions: [".ts", ".tsx", ".js"], //添加支持的文件类型 alias: { "@": __dirname + "/src", // "@component": __dirname + "src/component", "@pages": __dirname + "/src/pages", // "@utils": __dirname + "src/utils", }, }, devServer: { inline: true, port: 8080, }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new webpack.HotModuleReplacementPlugin() ] }
好的，这样我们就可以在项目中愉快的使用ts+react来编写了。
（结尾预告一下之后的方向，排名不分先后：多页面webpack配置 + 开发/生产环境webpack配置 + css相关依赖引入配置）。
10.引入less相关依赖
npm install --save-dev css-loader less-loader less style-loader
在webpack.config.js中增加如下模块配置：
module: { rules: [ ... { test:/\.less$/, use: ['style-loader','css-loader','less-loader'] }, { test:/\.css$/, use: ['style-loader','css-loader'] }, ] }
———————————————— 完结（预告一下，下篇随笔有个关于此篇随笔的后续）——————————————
