webpack4.29.x成神之路（十） webpack-dev-server下

目录

上节：webpack-dev-server上

上节目录如下：

基本配置

之前devSerer的值是个空对象，用的都是默认配置，比如host:localhost, 端口:8080，这些都可以自定义

修改webpack.config.js:

// 省略
 devServer: {
    host: '0.0.0.0',
    port: 3306,
    hot: true
  },
// 省略

然后重新npm run dev, 这时既可以用localhost:3306，也可以用电脑ip:3306访问。

publicPath

自从使用devServer后，便不像之前那样，每次都访问打包后的bundles目录下的代码，但其实output目录并非不存在，而是在缓存中，只是没有写进磁盘，我们还是可以通过url访问到打包后的代码。

修改配置中output.filename属性

webpack.config.js:

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[hash:8].js',
    path: resolve(__dirname, 'bundles')
  },

  // 开启devServer
  devServer: {
    host: '0.0.0.0',
    port: 3306,
    hot: true
  },

  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};

然后重新 npm run dev打开浏览器，应该和上节一样：

这是输入网址：localhost:3306/main.js,应该能访问到打包后的main.js：

ps: 为什么是main.js? 如果不急得了需要回顾下entry和output噢。

publicPath就是用来修改文件访问路径的，默认值是： '/'。

修改配置，webpack.config.js:

devServer: {
    host: '0.0.0.0',
    port: 3306,
    hot: true,
    publicPath: '/assets/'
  },

重新 npm run dev, 这时的访问路径就变成了localhost:3306/assets/main.js

HTML5 History API

当访问一个不存在路径比如：

如果想让所有的404请求的重定向到index.html，就需要配置historyApiFallback

webpack.config.js:

// 省略
devServer: {
    host: '0.0.0.0',
    port: 3306,
    hot: true,
    // publicPath: '/assets/'
    historyApiFallback: true
  },
// 省略

重新 npm run dev, 然后随便访问个不存在的路径都会重定向到index.html

还可以用正则做精确匹配，比如：

// 省略
devServer: {
    host: '0.0.0.0',
    port: 3306,
    hot: true,
    // publicPath: '/assets/'
    // historyApiFallback: true
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },  // 根路径/ => /views/landing.html
        { from: /^\/subpage/, to: '/views/subpage.html' },  // /subpage => /views/subpage.html
        { from: /./, to: '/views/404.html' }
      ]
    }
  },
// 省略

proxy处理跨域

利用devServer的proxy属性可轻松在开发阶段解决跨域问题

修改src/index.js:

// 请求接口
fetch('https://api-m.mtime.cn/Showtime/LocationMovies.api').then(res => {
  console.log('res :', res);
});

然后npm run dev，打开f12 应该会看到典型的跨域错误：

修改配置，webpack.config.js:

// 省略

devServer: {
    host: '0.0.0.0',
    port: 3306,
    hot: true,
    // publicPath: '/assets/'
    historyApiFallback: true,
    proxy: {
      '/Showtime': {
        target: 'https://api-m.mtime.cn',
        changeOrigin: true
      }
    }
  },

// 省略

修改src/index.js:

fetch('/Showtime/LocationMovies.api').then(res => {
  console.log('res :', res);
});

重新npm run dev, 就能请求到数据咯

proxy配置很多，还可以设置拦截器，比如：

// 省略
 devServer: {
    host: '0.0.0.0',
    port: 3306,
    hot: true,
    // publicPath: '/assets/'
    historyApiFallback: true,
    proxy: {
      '/Showtime': {
        target: 'https://api-m.mtime.cn',
        changeOrigin: true
      }
    },

    // 拦截器
    bypass: function (req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  },
// 省略

详细用法参考： https://github.com/chimurai/h...

下节：babel编译es6（待更新）