# webpack-deploy

**Repository Path**: kyrintech/webpack-deploy

## Basic Information

- **Project Name**: webpack-deploy
- **Description**: webpack部署打包环境封装
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-11-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webpack部署工具

已经是很久以前的想法了，希望能实现一套前端资源分版本打包的一个工具，经过使用webpack 1年多的总结，做出来。

暂时不作太细的介绍。

```javascript
const {
	Loader,
	Config,
	Deploy,
	BabelEs2105Loader,
	UrlLoader,
	FileLoader
} = require('webpack-deploy');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

let test = new Deploy('test/src/index.js', 'test/public');

test.setPackageFile('test/package.json');

test.on('deploy', function(config) {

	const extractCss = new ExtractTextPlugin({
		filename: test.mkOutput('css/[name].css'),
	});

	const extractLessLoader = new Loader('less', extractCss.extract({
		use: [{
			loader: "css-loader"
		}, {
			loader: "less-loader"
		}],
		// use style-loader in development
		fallback: "style-loader"
	}));

	let babelLoader = new BabelEs2105Loader('jsx', {
		presets: ['react'],
	});
	
	let imgLoader = new FileLoader(['gif', 'png', 'jpg', 'jpeg'], {
		name: '[hash].[ext]',
		outputPath: test.mkOutput('imgs'),
	});
	
	let fontLoader = new FileLoader('woff|woff2|eot|ttf|svg', {
		name: '[name].[ext]',
		outputPath: test.mkOutput('fonts'),
	}, '(\\?[\\s\\S]+)?');

	config.addLoaders(extractLessLoader, babelLoader, imgLoader, fontLoader);
	config.addPlugins(extractCss);
});

module.exports = test;

```

在项目的package.json文件中，添加对应的脚本指令：

注意必须在命令行附加 `--env.mode dev|pre|release`

```json
{
	"scripts": {
		"test": "babel-watch --watch src test/index.js",
		"dev": "webpack-dev-server --config ./webpack.test.js --devtool eval --progress --colors --hot --inline --content-base ./test/public --port 8084 --env.mode dev",
		"pre": "webpack --config ./webpack.test.js --env.mode pre",
		"release": "webpack --config ./webpack.test.js -p --env.mode release"
	},
}
```