您的位置:

详解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目录