一、基本框架搭建
创建项目并安装依赖
mkdir snake
cd snake
npm init -y
// 安装webpack及依赖
// webpack-cli 是webpack的命令行工具，装了这个，就可以用命令行使用webpack
// ts-loader 是typescript加载器，通过它可以把webpack和typescript进行整合
npm i -D webpack webpack-cli typescript ts-loader
安装完依赖，在根目录创建webpack的配置文件 webpack.config.js
const path = require('path')
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目录
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
// 指定webpack打包时要使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: 'ts-loader',
// 要排除的文件
exclude: /node_modules/
// 这块配置的意思是，使用ts-loader处理所有以.ts结尾的文件，但排除掉node_modules文件夹
}
]
}
}
进行ts的配置，在根目录创建tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
在package.json的scripts中加一个build命令
"build": "webpack"
测试
在
src/index.ts中写一句代码，比如
console.log('hello webpack and typescript')
控制台中执行编译命令 npm run build 即开始编译，编译后得到 dist/bundle.js
二、使用常见的webpack插件
- html-webpack-plugin
使用该插件，可以在编译时自动生成一个html文件，并引入相关资源。
npm i -D html-webpack-plugin
如何使用该插件
// webpack.config.js
// 先引入该插件
const HTMLWebpackPlugin = require("html-webpack-plugin")
// 在webpack的配置对象中加一个plugins的配置，该配置接收一个数组
// 配置webpack插件
plugins: [
// 自动生成一个html，并引入相关资源，使用该插件后，经过编译，`dist`目录中不止有`bundle.js`，还会多一个`index.html`，里面引入了`bundle.js`
new HTMLWebpackPlugin()
]
使用npm run build 编译后，dist目录中出现了bundle.js和index.html
// index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script defer="defer" src="bundle.js"></script>
</head>
<body></body>
</html>
可以看到编译后的index.html中引入了bundle.js，title默认为Webpack App
如果希望自定义html模板，可以在new HTMLWebpackPlugin时，传入一些参数
plugins: [
new HTMLWebpackPlugin({
// title: '我是一个app' // 使用该参数可以指定编译后的html的标题
template: './src/index.html'
})
]
title参数可以指定编译后html的标题
template参数可以指定一个模板，这里我在src目录下创建了index.html，编译后，将以该文件为模板，在dist目录下生成一个index.html
2.webpack-dev-server
webpack开发服务器，用来将webpack应用输出到服务，并在代码更新时刷新浏览器
npm i -D webpack-dev-server
如何使用该插件
// package.json scripts中加一条
"start": "webpack serve --open"
使用npm run start 命令，即用webpack开发服务器启动了项目，项目启动后，自动用默认浏览器打开index.html
3.clean-webpack-plugin
在编译前，先清空掉dist目录
npm i -D clean-webpack-plugin
如何使用该插件
// webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
// plugins数组中添加这个插件
new CleanWebpackPlugin()
三、设置引用模块
假如在a.ts中引入b.ts，直接编译会报错，因为webpack默认情况下不知道ts文件可以作为模块被引用，所以需要在配置文件中设置一下
// webpack.config.js的webpack配置中添加一个resolve属性
// 用来设置引用模块（那些文件可以作为模块使用）
resolve: {
extensions: ['.ts', '.js']
}
好了，一个基本的webpack项目的架子已经搭起来了，但在实际使用中，这个架子还不够，它不能支持到旧版本的浏览器。
比如IE不能支持const，一些css样式的兼容性问题等。
下一篇，我们将引入babel和postcss来解决这些问题。
