webpack----详细配置

webpack文档

配置项entry

入口文件：

• string, 如 “./src/index.js” 单入口，输出一个bundle.js
• array, [‘./src/index.js’, ‘./src/query.js’] , 将后面的多个模块打包到index.js模块中，输出一个bundle.js
• object, {index: ‘./src/index.js’, query: ‘./src/query.js’}
  以key为名字，打包出多个bundle。

output

打包输出

output: {
	filename: "js/[name].js", //入口文件命名为main.js；非入口文件0.js
	path: resolve(__dirname, 'build'), //打包输出目录
	publicPath: '/static',  //打包出的资源路径 前拼接
	chunkFilename: 'js/[name]_chunk.js', //非入口文件的打包后的名字
	library: '[name]', // 打包后的库向外暴露的变量名
	libraryTarget: "window", //库添加到浏览器 or global	
}

resolve

解析模块的规则

resolve: {
	alias: { // 设置别名，简化路径书写
		@: resolve(__dirname, "src/components")
	},
	extensions:[".js", ".json", ".jsx"], //可以省略的扩展名
	// 准确查找依赖模块
	modules: [resolve(__dirname, "node_modules")],
	
}

devServer

开发服务器模块

devServer: { // 开发服务器，在内存中自动编译（打包），自动打开浏览器
    //contentBase: resolve(__dirname, "build"), //打包的路径，新版本已弃用
    static: { // 新版本 打包的路径，并展示
        directory: resolve(__dirname, "build")
    },
    watchFiles: true, //监视打包目录下的内容，变化则重载
    liveReload: true, //结合watchFiles一起使用
    compress: true, //gzip压缩
    open: true, //打开浏览器
    host: "localhost",
    port: 3000, //服务器监听的端口号
    hot: true, // 热模块替换
    
	allowedHosts: ["www.baidu.com", ], //允许访问本开发服务器的源
	https: true, //使用https 提供服务
	headers: {
		"user-agent":"xxx", //为所有响应添加响应头部
	}
	devMiddleware:{
		index: false // 开启根代理
	}
	// 代理，解决跨域
	proxy: {    多个地址前缀代理到同一个服务器使用context：[xx, xxx] ----proxy:[{context: [xx,xxx], target: xxx}, {},....]
		"/api/a": {
			target: "http://localhost:5050",
			pathRewrite: { "/api/a": ""}, // /api/a/user --> /user发给5050服务器
			changeOrigin: true, //跨域
		},
		"/api/b": {
			target: "http://localhost:8080",
			pathRewrite: {"/api/b", ""},
			changeOrigin: true,
			// 对浏览器的请求，则返回html页面
			//对 api的请求，则进行代理
			bypass: function (req, res, proxyOptions) {
            if (req.headers.accept.indexOf('html') !== -1) { //接收html
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
		}
		
	}
}

配置参数

optimization

 optimization: {
    runtimeChunk: { //将当前模块中记录其他模块的hash值单独打包到一个runtime文件
      name: (entrypoint) => `runtime-${entrypoint.name}`,
    },