这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

webpack+devServer构建项目404甚至失败

原因：配置开发环境的文件配了publicPath，注意，这个配置项只能在生产环境配置，这个东西的意思是打包后给所有静态资源指定一个前缀地址。

webpack+vue+ts出现报错

在使用SFC(单文件组件的时候)，使用lang=ts报错 vue必要的配置配置：vue-loader&vue-template-compiler

webpack必要的配置:webpack&webpack-cli

 {
                    test: /\.ts$/,
                    use: [
                        {
                            loader: "ts-loader",
                        },
                    ],
  },
  报错：export 'render' (imported as 'render') was not found in './App.vue?vue&type=template&id=1ebcac49&ts=true' (module has no exports)

解决方案：webpack处理ts时多一个配置

 test: /\.ts$/,
                    use: [
                        {
                            loader: "ts-loader",
                            //这是必要的
                            options: { appendTsSuffixTo: [/\.vue$/] },
                        },
                    ],

babel如何在webpack+ts中使用

安装@babel/preset-env、@babel/preset-typescript、babel-loader等 在webpack的rules中配置需要使用babel的文件

{
                    test: /\.ts$/,
                    use: [
                        "babel-loader",
                        // {
                        //     loader: "ts-loader",
                        //     options: { appendTsSuffixTo: [/\.vue$/] },
                        // },
                    ],
},

babel.config.json配置(如需polyfill还需在生产环境下安装core-js、regenerator-runtime)

{
    // 先执行插件，从前往后
    "plugins": [],
    // 预设逆序执行
    "presets": [
        [
            "@babel/preset-env",
            {
                // false 不使用任何的polyfill
                //以下的两个值可能会发生冲突(加入第三方库如果实现了关于polyfill相关的东西，你再实现 会有冲突的问题)，解决：在babel-loader中加入exclude属性
                // usage 根据源代码需要哪些polyfil就引入相关的api
                // entry只要是浏览器需要的polyfill都引入(不是根据源代码应用哪些polyfill)
                "useBuiltIns": "usage",
                "corejs": "3"
            }
        ],
        ["@babel/preset-typescript"]
    ]
}

注意：babel可以代替ts-loader,只需要配置了@babel/preset-typescript即可 注意：babel-loader(无类型检查，错误依旧可以运行)虽然可以代替ts-loader，但是这样会造成一个影响，即使ts类型报错也可以打包成功。而ts-loader(有类型检查，错误则不能运行)则不会。

解决方案：在执行开发/生产环境的脚本前面，先执行tsc --noEmit，依旧使用babel-loader进行代码转换，一样可以实现类型检查失败报错。

关于postcss在webpack工程化使用的问题

由于vue-loaderv15以上不默认配置postcss，所以我们需要自己配置 开发环境下安装postcss-loader -D包 webpack.config.js中的配置

{
                    test: /\.less$/,
                    use: [
                        "vue-style-loader",
                        "css-loader",
                        "postcss-loader",
                        "less-loader",
                    ],
                },

postcss.config.js的配置(需要npm i -D postcss-preset-env)

module.exports = {
    plugins: [require("postcss-preset-env")],
};