前面说到我们都通过webpack-dev-server插件来实现搭建开发环境的，我们在开发环境下，往往需要修改一些配置来方便我们开发。接下来就介绍一些对开发有用的配置。
配置接口代理
通常我们做项目就是前后端分离的，在请求数据时会存在跨域，那开发阶段就可以用代理的方式绕过跨域。
例如我们本地开发服务器地址是http://localhost: 3000，但是我们后端服务器地址是http://47.96.132.165:5000， 这时候就存在跨域啦！就会报如下的错误。
安装
axios。yarn add axios。
// webpack.config.js
// 这个后端接口是我自己的公开的，可以用。
/* 下面的意思就是请求接口/api就代表 http://localhost: 3000/api,
他将转发到http://47.96.132.165:5000/api的后端接口上，然后后端不可能
多一个api的路由，所以要用pathRewrite替换api，之后在改变origin,开发环境就能跨域了。
*/
devServer: {
host: 3000
proxy: {
'/api': {
target: 'http://47.96.132.165:5000/',
pathRewrite: {'^/api': ''},
changeOrigin: true
}
}
},
// src/index.js
// 请求一个接口
axios({
method: 'get',
url: '/api',
}).then(data => {
console.log(data)
})
代理就设置成功啦！
配置模块解析规则resolve
// webpack.config.js
resolve: {
// 按顺序自动解析文件类型，我们可以在import文件后不加文件的后缀名
extensions: ['.js', '.json', '.ts', '.jsx', '.vue'],
// 相对路径查找起来麻烦，可以设置别名来简化路径
alias: {
'@': path.resolve(path.join(__dirname, 'src'))
}
},
source-map
可以将打包后的代码映射到源代码上，方便我们调试
// webpack.config.js
// 建议使用source-map和cheap-module-source-map
mode: "development",
devtool: 'source-map',
使用typescript
1.安装插件。yarn add ts-loader typescript --dev。
2.初始化typescript。yarn typescript --init。
3.在webpack.config.js中添加对ts文件的loader.
{
test: /\.ts$/,
use: ['ts-loader']
},
4.添加一个ts文件。
// src/ts/index.ts
const createTs = (content: string) => {
console.log(content);
}
createTs('我是Ts文件')
5.在index.js中引入。
// src/index.js
import './ts'
ts的引入就完成啦！
当然我们也可以使用babel-loader来加载ts。具体做法如下：
// webpack.config.js
{
test: /\.ts$/,
use: ['babel-loader']
},
// babel.config.js
presets: [
[
'@babel/preset-env',
{
/**
* false 不对项目的js做polyfill的处理
* usage 依据代码中所使用的带的语法进行填充
* entry 依据所要兼容的平台进行填充
*/
useBuiltIns: 'usage',
corejs: 3
}
],
['@babel/preset-typescript']
],
重新运行npm run serve，发现也能解析ts。
那ts-loader和babel-loader的两种做法都有什么区别呢？
babel-loader可以为我们处理ts的polyfile的兼容性，ts-loader做不到。
我们修改src/ts/index.ts里函数的输入值，改为createTs(1111)，发现在babel-loader下还是可以正常运行，并不会报错，我们切回ts-loader后，发现运行之后直接报错。并且babel-loader可以正常运行npm run build，但是无法运行打包后的文件。
那有没有什么方法可以二者兼得呢？
我觉得开发环境用ts-loader,生产用babel-loader比较好。
// package.json
"scripts": {
"build": "npm run ck && webpack",
"serve": "webpack server",
"ck": "tsc --noEmit"
},
