webpack 配置问题

1.字体文件路径加载不对
在build/utils文件中的下图所示位置添加../../公共路径

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })

2.js等文件加载路径不对
config/index.js配置资源路径

assetsPublicPath: '资源路径',

3.按需引用,不同的html模板引入仅它自己需要的css和js

  entry: {
    facebook: './src/main.js',
    ins: './src/main1.js'
  },
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks:["facebook"]
    }),
   new HtmlWebpackPlugin({
    // 生成出来的html文件名
    filename: 'index1.html',
    // 每个html的模版,这里多个页面使用同一个模版
    template: './index.html',
    // 自动将引用插入html
    inject: true,
     chunks:["ins"]
    // 每个html引用的js模块,也可以在这里加上vendor等公用模块
  }),

4.webpackJsonp is not defined报错
CommonsChunkPlugin 公共文件必须在自己引用的js文件之前引用。
可以手动改文件引用,但是推荐以下解决办法:
找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可

chunks: ['manifest', 'vendor', 'app']

5.多页面配置本地热更新问题
修改webpack.dev.conf.js配置文件

 rewrites: [
        { from: /ins/, to: path.posix.join(config.dev.assetsPublicPath, 'ins.html') },
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'facebook.html') },
      ],

同时生成多个html页面

 new HtmlWebpackPlugin({
      filename: 'facebook.html',
      template: 'index.html',
      inject: true,
      chunks: ["facebook"]
    }),
new HtmlWebpackPlugin({
  // 生成出来的html文件名
 filename: 'ins.html',
// 每个html的模版,这里多个页面使用同一个模版
template: './index.html',
// 自动将引用插入html
inject: true,
  chunks: ["ins"]
// 每个html引用的js模块,也可以在这里加上vendor等公用模块
  }),

6.IE浏览器使用promise
npm install --save babel-polyfill

你可能感兴趣的:(webpack 配置问题)