KeenV
2/5/2020 - 10:00 AM

Webpack Configuration

webpack basic configuration

module.exports = {
	context: path.resolve(__dirname, './src')// 绝对路径,默认当前执行路径。解析entry和loader时基于此路径
	entry: { // 如果传入一个字符串或字符串数组,chunk 会被命名为 main。如果传入一个对象,则每个键(key)会是 chunk 的名称,该值描述了 chunk 的入口起点。
	  home: "./home.js",
	  about: "./about.js",
	  contact: "./contact.js"
	},
	output: {
    	filename: '[name].[chunkhash].js',
		chunkFilename:'[id].js'// 决定非入口chunk的名称。比如异步加载模块 在未指定chunk name 时[name]占位符默认被替换为[id]
    	path: path.resolve(__dirname, 'dist'),
		publicPath: '' // 默认所有资源的引用路径是以output目录为基准。此选项指定在浏览器中引用时,output目录对应的公开URL(相对路径会相对于HTML页面解析)。
  },
	rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
   ]
}