从零配置webpack脚手架，搭建typescript编译运行打包环境。
搭建webpack构建环境
- 初始化
npm init -y
2.安装依赖
npm i -D webpack webpack-cli typescrpt ts-loader
3.webpack环境配置
新建webpack.config.js配置文件，内容如下
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
4.添加tsconfig.json文件并新增配置
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}
5.配置package.json
在scripts选项中添加"build": "webpack"
以上配置完成，在index.ts中输入代码:
const str: string = 'hello, world';
console.log(`name: ${str}`);
控制台输入npm run build，可以看到项目目录中生成了dist目录，里边有一个打包后的文件bundle.js，内容如下:
(()=>{"use strict";console.log("name: hello, world")})();
引入HTMLWebpackPlugin插件
1.安装插件
npm i -D html-webpack-plugin
html-wepback-plugin插件会自动在打包时生成一个html文档，并自动引入打包之后的bundle.js文件，关于该插件的更多信息请访问github
2.配置webpack
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HTMLWebpackPlugin()
]
}
编译，dist目录下生成了index.html文件
2.自定义html文件
添加html文件
修改webpack配置
plugins: [
new HTMLWebpackPlugin({
template: './src/public/index.html'
})
]
通过修改template选项，指定模版html文件，该插件会自动引入该html文档并打输出，配置完成后运行npm run build，dist目录下的html文件相应更新
配置webpack配置服务器
首先安装，
npm i -D webpack-dev-server
其次配置package.json，
"start": "webpack serve --open chrome.exe"
最后运行npm run start，页面内容如下：
配置clean-webpack-plugin
首先执行npm i -D clean-webpack-plugin, 然后引入const {CleanWebpackPlugin} = require('clean-webpack-plugin');, 配置如下:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HTMLWebpackPlugin({
template: './src/public/index.html'
}),
new CleanWebpackPlugin()
]
}
另外，如果需要将文件作为模块使用，还需要配置resolve选项，
resolve: {
extensions: ['.ts', '.js']
}
不然会报错:
配置Babel
安装相关依赖:
npm i -D @babel/core @babel/preset-env babel-loader core-js
webpack相关配置修改:
{
test: /\.ts$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: {
'chrome': '88'
},
'corejs': '3',
// 按需加载
'useBuiltIns': 'usage' // 使用core.js的方式
}
]
]
}
},
'ts-loader'
]
},
配置css相关loader
npm i -D less less-loader css-loader style-loader
webpack配置:
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
loader的执行顺序从下向上，所以最先执行的放到最下面
配置完成后，添加index.less文件并输入测试代码，在index.tsx中引入样式文件，运行npm run start查看效果，样式生效：
index.less
body {
background-color: red;
}
配置PostCSS
npm i -D postcss postcss-loader postcss-preset-env
配置webpack，postcss的配置信息应该放置在less-loader执行之后，按照loader从下向上之行的顺序，应该放在less-loader和css-loader之间，如下:
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 引入postcss
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 version' // 兼容浏览器当前最新的两个版本
}
]
]
}
}
},
'less-loader'
]
}
修改index.less内容如下:
body {
background-color: red;
display: flex;
}
运行npm run build，打开bundle.js查看编译之后的内容，可以看到postcss-loader生成的浏览器兼容样式信息:
\"body {\\n background-color: red;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n}\\n\"
总结
文本完成了Webpack+TypeScript+Less开发环境配置，主要完成了以下几个方面的配置：
-
初始化
webpack，项目中新增webpack配置文件webpack.config.js，与webpack相关的配置信息都放在这个文件中，同时配置了entry, module, output等选项entry指明入口文件module设置相关loader，typescript相关的loader在此处配置output为打包输出配置，比如设置输出路径、输出文件名等
-
安装
typescript相关loader-typescript, ts-loader，并添加到webpack配置文件中；同时添加typescript配置文件tsconfig.json，并在其中添加compilerOption设置target, module, strict等选项； -
配置
HTMLWebpackPlugin插件，该插件会在打包时自动生成一个html文档，并在其中自动引入打包之后的bundle.js文件 -
配置
webpack-server，是项目能在浏览器中自动运行 -
配置
clean-webpack-plugin，在打包构建时自动清除上一次的打包产物 -
配置
Babel, 作用是解决ES6向低版本的转义问题 -
配置
css相关loader，在webpack中loader的解析顺序是从下➡️上，所以最下方的loader先得到解析 -
配置
postcss，目的是解决样式在不同浏览器的兼容问题
附录
最后奉上最终版本的配置文件信息
webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: {
'chrome': '88'
},
'corejs': '3',
// 按需加载
'useBuiltIns': 'usage' // 使用core.js的方式
}
]
]
}
},
'ts-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 引入postcss
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 version' // 兼容浏览器当前最新的两个版本
}
]
]
}
}
},
'less-loader'
]
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
environment: {
arrowFunction: false // 不能使用箭头函数
}
},
plugins: [
new HTMLWebpackPlugin({
template: './src/public/index.html'
}),
new CleanWebpackPlugin()
],
resolve: {
extensions: ['.ts', '.js']
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}
package.json
{
"name": "typescript-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "7.15.8",
"@babel/preset-env": "7.15.8",
"babel-loader": "8.2.2",
"clean-webpack-plugin": "4.0.0",
"core-js": "3.18.2",
"css-loader": "6.4.0",
"html-webpack-plugin": "5.3.2",
"less": "4.1.2",
"less-loader": "10.1.0",
"postcss": "8.3.9",
"postcss-loader": "6.2.0",
"postcss-preset-env": "6.7.0",
"style-loader": "3.3.0",
"ts-loader": "9.2.6",
"typescript": "4.4.3",
"webpack": "5.58.1",
"webpack-cli": "4.9.0",
"webpack-dev-server": "4.3.1"
}
}
项目目录树
如果你觉得这篇文章还不错，那就请点个赞吧😁
