webpack配置常见问题

vue项目中配置问题

通过webpack之externals配置引入外部插件，减少打包vendor体积

1.在index.html里引入vue.min.js,vuex.min.js等等

2.在build/webpack.base.conf.js下

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  // 这里需要将vue和vue-router公开出去，供全局使用
  //这里小写的(即冒号左边的)vue和vue-router是我们引入资源时对应的名字，
  //冒号右面的是由库的主人暴露出来的全局方法名
  externals: {
   'vue': 'Vue',
    "element-ui": "ELEMENT",
    "vue-router": "VueRouter",
    "vuex": "Vuex",
    "qs": "qs",
    "axios": "axios",
    "jquery": "$",
  },
  output: {}
// 其他...
}

webpack 配置局域网ip地址

config/index.js

module.exports = {
  dev: {

    // Paths
  ......
  // 配置代理解决跨域
    proxyTable: {
        '/api': {
            target: 'http://xx.com.cn/',
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': ''
            }
        }
    },
    // 配置局本地ip地址
    host: '0.0.0.0', // 设置为0.0.0.0就可以访问本地ip地址了
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
   .....
  },

  build: {}
}

配置代理解决跨域

1.在config/index.js

module.exports = {
  dev: {

    // Paths
  ......
  // 配置代理解决跨域
    proxyTable: {
        '/api': {
            target: 'http://xx.com.cn/',
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': ''
            }
        }
    },
    // 配置局本地ip地址
    host: '0.0.0.0', // 设置为0.0.0.0就可以访问本地ip地址了
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
   .....
  },

  build: {}
}

2.在src/main.js

Vue.config.productionTip = false
// 打包替换本地代理
Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/api';
// vue loading全局组件
Vue.component('loading', {
    template: '
正在加载...
'
});

new Vue({
    el: '#app',
    render: h => h(App),
    router,
    components: { App },
    template: '',
    store
})

解决调用后端接口时，需要先登录的问题

如同：
在src/main.js中

export default {
    name: 'App',
    components: {
       
    },
    data() {
        return {
           
        }
    },
    computed: {
        ...mapState(['runwayNum'])
    },
    methods: {
       
    },
    created() {
        // 在开发环境
        if(process.env.NODE_ENV === 'development') {
          // 设置接口cookie为接口地址已登录的cookid
          document.cookie = 'ci_session=xxxxxx';
        }
    },
    mounted() {
    }
}

一个模块里，不要有index.vue和index.js，因为index.js的优先级最高

webpack打包路径修改

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths 路径修改
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static/release_sort',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

react项目中配置问题

1.配置代理解决跨域
修改script/start.js文件

image.png

// Create a webpack compiler that is configured with custom messages.
    const compiler = createCompiler({
     .....
    });
    // Load proxy config 修改proxy配置
    const proxySetting = require(paths.appPackageJson).proxy;
    let proxyConfig = prepareProxy(proxySetting, paths.appPublic);
    proxyConfig = {
        '/api/**': {      // 匹配访问地址中包含api的，如果http://baidu.com/api/page 
            target: 'http://....com.cn/',  //要跨域访问的地址
            changeOrigin: true,
        },
    }
  
    // Serve webpack assets generated by the compiler over a web server.
    const serverConfig = createDevServerConfig(
      proxyConfig,
      urls.lanUrlForConfig
    );
    const devServer = new WebpackDevServer(compiler, serverConfig);