webpack单独使用起步

webpack单独使用

1. inint npm，再安装webpack(cnpm I webpack-dev-server)

是

2. 然后增加webpack.config.js，在其中设置配置，export一个json对象，并设置如entry路径和output路径和output的filename：[name].bunndle.js，

可以设置多个entry和output，publibcpath设置完后在有webpack-dev-server的项目的index.html里可以引用打包好的js文件，使用时需在package.json里加入本地命令script里写运行webpack-dev-server的命令。这样在package.json里设置script的start属性可以相当于在外部输入的命令行，只是引用本地的模块。

3. Webpack-plugin：

（1）主要用于修改输出使用，如uglify.js.plugin，引入webpack模块后export多一个plugin属性，可以压缩代码

module.exports = {
	entry:{},
	plugin: [
		new webpack.optimize.UglifyJsPlugin()
	]
}

（2）sourceMap

4. Webpack-loaders，写在module字段里:

方法（1）：在wenpack.config.js的entry的js里可以引用css文件或者图片,可以在单个js文件中使用require时加上loader
方法（2）：也可以在config文件中配置module字段，统一增加loader，针对某种后缀使用不同的loader

module.exports = {
	entry:{},
	plugin: [
		new webpack.optimize.UglifyJsPlugin()
	],
	module:{
		noParse:[/jquery/],
		loaders: [{
			test: /\.png$/,
			loader: 'file'
		},{
			test: /icons/,
			loader: 'url'
		},{
			test: /\.scss$/,
			loader: 'style!css!sass'
		},{
			test: /\.js$/,
			exclude:/node_modules/,
			loader: 'babel'
		}]
	}
}
//注意：引用的loader需要在package.json的依赖文件中写明

Css-loader:把css文件转变成字符串，并把背景图片的url引用进来

Raw-loader: 只是把css内容引用成字符串，背景图片的url不会import,效率比上面的高

Style-loader: 把上步骤的css字符串加载到head里作为样式引用
从右向左引用loader

File-loader: 引用文件类型的图片

Url-loader： 小图标使用base64格式引用

Sass-loader: 加载scss文件，使用前需使用style和css-loader

Babel-loader: 使得编程时可以使用最新的es6语法，如import和字符串模版等，其中exclude:不编译的文件目录；include: 只编译的文件目录，减少打包时处理的文件，还可以使用noParse加快打包文件，可以不编译部分文件里的require

5. 正式环境压缩打包后文件的方法：

1. package,json中打包时命令的参数：-p可以压缩文件，优化打包后的文件大小，
2. uglify-plagin，使用uglyfy-plugin时可以加上参数：compress{ warings: false }
3. occurenceOrderPlugin，可以优化所有module的id，使得文件大小更小

6. 开发环境使用uglify会很耗时，可以使用两种方法区分压缩大小和时间：

1. node-args库来检测参数是正式环境还是开发环境，正式环境则加上plugin的uglify参数
2. node的环境变量方法（process.env.NODE_ENV）。判断env == production时才uglify文件，此时需要在package.json的script命令行加上NODE_ENV的值