# musicApp

**Repository Path**: langouste/musicApp

## Basic Information

- **Project Name**: musicApp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#蓝景技术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配置文件说明
具体看代码注释即可
```javascript
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官方](https://webpack.js.org/concepts/)   
[webpack4中文手册](https://webpack.docschina.org/concepts/)     
[babel](http://babeljs.io/docs/usage/babelrc/)      
[postcss插件](https://github.com/postcss/postcss)    
[image-webpack-loader图片压缩](https://github.com/tcoopman/image-webpack-loader#readme)    
[VueLoader](https://github.com/vuejs/vue-loader/)    
[CopyWebpackPlugin复制文件](https://www.npmjs.com/package/copy-webpack-plugin)    
[MiniCssPlugin提取公共CSS](https://webpack.js.org/plugins/mini-css-extract-plugin/)    
[UglifyJsPlugin压缩JS](https://webpack.js.org/plugins/uglifyjs-webpack-plugin/)    
[OptimizeCSSAssetsPlugin压缩CSS](https://www.npmjs.com/package/optimize-css-assets-webpack-plugin)    
[rimraf删除目录](https://www.npmjs.com/package/rimraf)