詳解webpack常用配置

一、入口entry

1、entry用於指定webpack打包的入口文件，可以是單個入口、多個入口甚至動態入口

2、單個入口：使用字元串作為單個入口

module.exports = {
  entry: './src/index.js'
}

3、多個入口：使用對象指定多個入口

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  }
}

4、動態入口：使用函數返回值作為入口

module.exports = {
  entry: () => new Promise(resolve => {
    resolve('./src/index.js')
  })
}

二、輸出output

1、output用於指定webpack打包後的輸出文件的路徑和名稱，可以是單個輸出、多個輸出

2、單個輸出：使用字元串指定單個輸出文件

module.exports = {
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
}

3、多個輸出：使用佔位符指定多個輸出文件名稱

module.exports = {
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
}

三、loader

1、loader用於對模塊的源代碼進行轉換，支持鏈式調用

2、使用方式：在module.rules中進行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
}

3、在上面的配置中，對於所有以.js結尾的文件，使用babel-loader進行轉換

四、plugins

1、plugins是一個用於執行範圍更廣的任務的插件集

2、使用方法：在plugins中進行配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App'
    })
  ]
}

3、在上面的配置中，CleanWebpackPlugin用於清空輸出目錄，HtmlWebpackPlugin用於生成HTML文件

五、mode

1、mode用於指定當前構建模式，支持development、production和none三種

2、使用方法：在mode中進行配置

module.exports = {
  mode: 'production'
}

六、resolve

1、resolve用於設置模塊解析的相關配置，如模塊搜索目錄、別名等

2、使用方法：在resolve中進行配置

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

3、在上面的配置中，通過alias設置了一個別名@，指向src目錄