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].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