webpack配置篇

99 阅读1分钟

configureWebpack

// 部署优化
configureWebpack: {
    // 使用CDN
    externals: {
      vue: 'Vue'}
    }
}
configureWebpack: (config) => {// 例如,通过判断运行环境,设置modeconfig.mode = 'production' }

outputDir: /dist //打包路径

devServer

// dev环境下,`webpack-dev-server` 相关配置
devServer: {
    host: '127.0.0.1', //开发运行时的域名
    port: 9999, // 端口
    proxy: '/download': {
        target: 'http://192.168.1.202:81/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '/4g-box/api': '/4g-box/'
        }
    } // 代理
 }

plugins插件

用于执行更广的任务

entry 入口文件

默认的 entry 入口是 scr/main.ts

loader

用于对模块module的源码进行转换,默认webpack只能识别commonjs代码,但是我们在代码中会引入比如vue、ts、less等文件,webpack就处理不过来了;loader拓展了webpack处理多种文件类型的能力,将这些文件转换成浏览器能够渲染的js、css

publicPath

加载静态资源的位置