tool_bluej_webpack4

#蓝景技术webpack脚手架 支持最新的webpack4.15.1打包
适用于单页应用、多页应用或vue应用

请保留原始目录结构，千万不要删除任何的文件夹

目录说明

/根目录
|——build				webpack配置文件
	|————customConfig.js用户自定义配置，可以在这里配置SPA或MPA等配置
	|————dev.js			开发模式的webpack配置
	|————pro.js			生产模式的webpack配置
|——src					源文件目录
	|————assets			需要经过webpack处理的静态文件，例如img、css
			|——images	图片存放处
			|——scss		scss或css文件存放处
	|————js				主要的js或vue文件存放处
	|————static			静态资源(例如字体图标库、json文件、第三方库等)，不经过webpack处理
	|————index.html		单页应用的html入口文件，如果多页，则多个html文件放在同级目录下
|——postcss.config.js		postcss配置文件(自动加前缀)		
|——.babelrc				babel配置
|——package.json			npm相关配置

使用说明

1. 开发模式 会开启文件监听，热更新，预览web服务

   npm run dev
   

2. 生产模式 直接打包为最终版本文件，压缩合并图片,压缩CSS,压缩JS,公共代码分离等

   npm run build
   

   注意：生成的文件，默认是必须放在根目录下访问，才可以访问成功，例如http://bgg.com/index.html,那你就必须把dist目录下的文件，全部放在bgg.com域名所指向的根目录

build/customConfig.js配置文件说明

具体看代码注释即可

const config = {
	//入口配置
	entry: {
		//入口文件，通常一个html一个入口
		index: ["./src/js/index.js"], //入口1
		index2: ["./src/js/index2.js"], //入口1
	},
	//入口文件最终生成存放目录(这里的/表示服务器地址的根，比如www.shuai.com/)
	outputPublicPath:'/',
	
	//多入口的配置
	plugins : [
        //自动注入相关文件到
		new HtmlWebpackPlugin({
			filename: "index.html", //目录相对于output.path
			template: path.resolve(__dirname,"../src/index.html"),
			chunks:['index','commons','runtime'],
			minify: { //压缩HTML文件
				 removeComments: true, //移除HTML中的注释
				 collapseWhitespace: true, //删除空白符与换行符
				 removeAttributeQuotes: true //删除标签属性值的引号
			},
			favicon:path.resolve(__dirname,'../fav.ico'),
			title: "页面1",
			meta:{
				"keywords":"蓝景脚手架1",
				"description":"用webpack帮你快速搭建项目1"
			}
		}),
        //自动注入相关文件到
		new HtmlWebpackPlugin({
			filename: "page2.html", //目录相对于output.path
			chunks:['index2','commons','runtime'],
			template: path.resolve(__dirname,"../src/page2.html"),
			minify: { //压缩HTML文件
				 removeComments: true, //移除HTML中的注释
				 collapseWhitespace: true, //删除空白符与换行符
				 removeAttributeQuotes: true //删除标签属性值的引号
			},
			favicon:path.resolve(__dirname,'../fav.ico'),
			title: "页面2",			//页面标题
			meta:{					//页面SEO设置
				"keywords":"蓝景脚手架2",
				"description":"用webpack帮你快速搭建项目2"
			}
		})
    ],
	
	// 开发端口号
	serverPort : 9000 ,

	/* 设置网站类型  ， true 单页模式   false   多页模式
		 多页模式下：
		 1. 监听html的变化
		 单页模式下：
		 1. 开发模式下不监听html的变化，主要依赖热更新
		 2. 生产模式下，开启optimization设置，包括抽取单独抽取公共样式，JS等，压缩代码等
	*/
	isSPA : true ,

	//
	resolve: {
		//引入文件，可忽略后缀名
		extensions: [".js", ".css", ".scss",".vue"],
		//引入模块的别名
		alias: {
			"vue": "vue/dist/vue.min.js"
		}
	},

	//可以把一些特别大的第三方库，在html页面以cdn全局引入的形式使用，但需要在这里定义一下，键名就是你的第三方库名字，值就是你引用该库所用的变量名
	externals:{
		'vue':'Vue',
		'jquery':'jQuery'
	}
}

参考文献：

webpack4官方
webpack4中文手册
babel
postcss插件
image-webpack-loader图片压缩
VueLoader
CopyWebpackPlugin复制文件
MiniCssPlugin提取公共CSS
UglifyJsPlugin压缩JS
OptimizeCSSAssetsPlugin压缩CSS
rimraf删除目录