前端项目本地项目疑难

201 阅读1分钟

1.本地不支持外部IP访问问题

// 1.注意package.json配置添加--host 0.0.0.0
"scripts": {
  "dev": "webpack-dev-server --config ./config/webpack.dev.ts --mode development --color --progress --hot --host 0.0.0.0 --inline",
  "lint": "tslint -c tslint.json 'app/**/*.{ts,tsx}' && stylelint **/*.{html,less}",
  "lint-fix": "tslint -c tslint.json 'app/**/*.{ts,tsx}' --fix && stylelint **/*.{html,less} --fix",
  "build": "webpack --config config/webpack.prod.ts"
},
// 2.查看webpack.dev.js配置
output: {
  filename: '[name].js',
  publicPath: '/', // 注意查看此配置
},
devServer: {
    ...
    host: '0.0.0.0', // 注意此配置
    disableHostCheck: true, // 注意此配置
    ...
}

2.通过设置ts-loader,来提升编译速度

rules: [
    {
        test: /\.tsx?$/i,
        use: [{
            loader: 'ts-loader',
            options: {
                transpileOnly: false // 编译时是否校验文件类型(默认false),改为true可提升速度
            }
        }]
    }
]

// 使用transpileOnly如果文件有错误会依然编译成功,可以引入fork-ts-checker-webpack-plugin
// 使用方法:直接在webpack,plugin中使用
plugin: [
    new ForkTsCheckerWebpackPlugin()
]