# admin-webpack

**Repository Path**: baoyinYang/admin-webpack

## Basic Information

- **Project Name**: admin-webpack
- **Description**: 一个用webpack + angular1.5.9进行后台管理项目开发的一些尝试
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2017-06-27
- **Last Updated**: 2021-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# admin-webpack

##### 使用方法

 * 1、一些依赖项已经在node_modules中，如果不全，可以在当前文件内通过npm进行安装

 * 2、安装之后可以开启监听预览模式查看
 
 ```node
 	webpack-dev-server --progress --colors
 ```

 * 3、可以用webpack命令进行文件的整理
 
##### 添加jquery

 * 1、可以只用npm安装
 
 ```nodejs
 	npm install jquery --save-dev
 ```
 * 2、在配置文件webpack.config.js中全局引入
 
 ```webpack.config.js
 	plugins:[
		new webpack.ProvidePlugin({
			$:"jquery",
			jQuery:"jquery",
			"window.jQuery":"jquery"	// angular中会自动寻找window.jQuery
		})
	]
 ```

##### 添加layer
 * 1、在app中引入本地layer
 
 ```js
 	import "./libs/layer/layer";
	layer.config({
		path:"../src/libs/layer/",		// 配置layer的目录路径，必须的步骤
	})
	window.layer = layer;
 ```
 * 2、使用layer
 
 ```js
 	import {app,layer} from "../app";
 	layer.msg("your msg");
 ```
##### 引入bootstrap

 * 1、webpack配置loader
 
 ```webpack.config.js
 	module{
 		loaders:[
 			{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
		    { test: /\.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000" },
		    { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
		    { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
 		]
 	}	
 ```
 
 * 2、引入bootstrap
 
 ```js
 	import "./libs/bootstrap-3.3.7-dist/css/bootstrap.min.css";
 ```

##### 多个html的输出和编译后的引用

````
	new htmlWebpackPlugin({
		filename:"index.html",
		template:"index.html",
		inject:"body",		// 编译后的文件的引入的位置
		chunks:["main"]		// 该html文件所需要引入的编译后的文件
	})
	
````



#####webpack 一些命令
	
	```````
	webpack --config webpack.min.js				// 另一份配置文件
	
	webpack --display-error-details				// 显示异常信息
	
	webpack --watch								// 监听变动并自动打包
	
	webpack										// 打包
	
	webpack -p									// 压缩混淆脚本
	
	webpack -d									// 生成map映射文件，告知那些模块被最终打包到哪里
	
	webpack --progress --colors					// 编译输出的内容带有进度和颜色
	
	webpack --progress --colors --watch			// 开启监听模式，只编译改动的模块，速度较快
	
	webpack-dev-server --progress --colors		// 开启开发服务，可以通过localhost:8080启动一个静态资源web服务器
	
	```````