webpack高级配置

html-withimg-loader

只需在html文件中正常引用图片即可，webpack会找到对应的资源进行打包并修改html中的引用路径 安装 添加 loader

rules: [
  {
    test: /\.(jpg|png|gif)$/i,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 5 * 1024,
          outputPath: 'images',
          name: '[name]-[hash:6].[ext]',
          esModule: false,
        },
      },
    ],
  },
  {
    test: /\.(htm|html)$/i,
    loader: 'html-withimg-loader',
  },
]

多页应用打包

修改入口出口配置，多入口无法对应一个固定出口，需将filename设为[name]变量，如果使用了html插件，需手动配置对应的html文件

  entry: {
    main: './src/main.js',
    other: './src/other.js'
  },
  output: {
    path: path.join(__dirname,'./dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['main','other']
    }),
  ],

第三方库引入

安装expose-loader将库引入到全局作用域

rules: [
  {
    test: require.resolve('jquery'),
    use: {
      loader: 'expose-loader',
      options: '$',
    },
  },
]

require.resolve获取模块的绝对路径

内置插件webpack.ProvidePlugin对每个模块的闭包空间注入一个变量，自动加载库到模块

const webpack = require('webpack')
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],

不同配置文件打包

抽取三个配置文件：webpack.base.js、webpack.prod.js、webpack.dev.js 安装webpack-merge

const { merge } = require('webpack-merge')
const base = require('./webpack.base.js')
module.exports = merge(base, {
  mode: 'development',
  devServer: {
    open: true,
    port: 8090,
    hot: true,
    compress: true,
    // contentBase: './src'
  },
  devtool: 'eval-cheap-module-source-map',
})

更改指令

  "scripts": {
    "dev": "webpack serve --config ./build/webpack.dev.js --compress --hot --open --port 8090",
    "build": "webpack --config ./build/webpack.prod.js",
    "startDist": "live-server ./dist"
  },

定义环境变量

const { DefinePlugin } = require('webpack')
plugins: [
  new DefinePlugin({
    CURRENT_ENV: '"develop"',
  }),
]

在 js 中

let url = 'http://192.168.2.12'
if (CURRENT_ENV === 'develop') {
  url = 'http://192.168.2.56'
} else if (CURRENT_ENV === 'production') {
  url = 'http://192.168.2.13'
}

使用devServer解决跨域

devServer: {
    proxy: {
      '/api': {
        target: 'http://api.vikingship.xyz/api',
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
}

HMR 热更新

需要对某个需求热更新，可以通过module.hot.accept方法进行文件监视

if (module.hot) {
  module.hot.accept('./hotmodule.js', function () {
    console.log('hotmodule.js更新了')
    let str = require('./hotmodule.js')
    console.log(str)
  })
}