【零基础学习Webpack】资源模块，webpack-dev-serve代理配置

1、webpack打包前清除上次打包文件

安装： cnpm install clean-webpack-plugin -D

配置文件中插件引入： const { CleanWebpackPlugin } = require('clean-webpack-plugin')

插件配置：

plugins: [
  .....
  // 打包之前，先删除历史文件
  new CleanWebpackPlugin()
  .....
]

2、资源模块

资源模块是一种模块类型，它允许使用资源文件，无需配置额外的loader

• 资源文件：字体，图片，图标，HTML…

• 无需使用file-loader、url-loader也能加载图片和字体

{
	test: /\.(png|gif|jpe?g)$/i,
	type: 'asset',
    parser: {
    dataUrlCondition: {
        // 指定图片大小，小于该数值的图片，会被转成base64
        maxSize: 8* 1024
    }
    },
    generator: {
        // name是图片原来的名称，ext是图片原来的后缀名,ext本身自己带`.`
        filename: 'image/[name][ext]'
    }
}

3、webpack-dev-serve

• 作用：发布web服务，提高开发效率。默认把内容打包到内存里
• 安装: cnpm install -D webpack-dev-server

配置devServe选项，注意之前的contentBase已经更新为static属性

// 开发服务器
  devServer: {
    // 指定加载内容的路径
    static: {
      directory: path.resolve(__dirname, 'dist1')
    },
    // 启用gzip压缩
    compress: true,
    // 指定端口号
    port: 9200,
    // 启用自动更新，（禁用hot）
    liveReload: true
  },

配置package.json

"scripts": {
  "dev": "webpack serve --mode development"
},

执行：npm run dev即可

4、proxy（配置接口代理）

解决webpck-dev-server下，访问接口的跨域问题，

// 开发服务器
  devServer: {
    // 指定加载内容的路径
    static: {
      directory: path.resolve(__dirname, 'dist1')
    },
    // 启用gzip压缩
    compress: true,
    // 指定端口号
    port: 9200,
    //  启用自动更新，（禁用hot）
    liveReload: true,
    // 配置代理,解决接口跨域问题
    proxy: {
      "/api": {
        // http://localhost:9200/api ----> https://api.github.com/api
        target: 'https://api.github.com',
        // http://localhost:9200/api ----> https://api.github.com/
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      }
    }

测试：浏览器访问 http://localhost:9200/api/users