webpack使用

webpack 
优势：1.以commonJS形式书写脚本，支持AMD/CMD
2.能被模块化的不仅仅是 JS 
3.开发便捷打包、压缩混淆、图片转base64


0.全局安装(err：webpack不是内部指令)
	npm install -g webpack
1.cd 
2.初始化（生成 package.json） npm init
3.安装到你的项目目录
	npm install --save-dev webpack
4.打包  webpack hello.js ./build/hello.build.js
5.引用其他文件 require(文件地址)
	*不支持css文件 需要css-loader style-loader
	npm install css-loader style-loader --save-dev
	*能够处理css文件(给css指定loader css-loader!) require('css-loader!./style.css')
	*使style生效（style-loader!） require('style-loader!css-loader!./style.css')
	*require('style-loader!css-loader!./style.css')转require('./style.css')
	--moudule-bind单引号会报错
	webpack hello.js ./build/hello.build.js --module-bind "css=style-loader!css-loader" --watch
	实时更新  --watch
	打包过程  --progress
	打包模块  --display-modules
	打包逻辑原因  --display-reasons

配置文件：webpack.config.js
执行	webpack
1.指定webpack配置文件 (--config)
	webpack --config webpack.dev.config.js


2.err：不是绝对路径解决方案
	* “__dirname” 是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
	* var path = require('path') 
	

	var path = require('path')
	module.exports = {
		/*页面入口文件配置*/
		entry: __dirname + '/src/script/main.js',
		entry: path.resolve(__dirname,'src/script/main.js')
		/*入口文件输出位置*/
		output: {
			path: __dirname + '/dist/js',
			filename: 'bundle.js'
		}
	}

3.webpack在命令行使用的参数添加 （因事直接执行 webpack） 
	*修改package.json, scripts(可输入命令),
	'scripts':{
		'webpack': 'webpack --config webpack.config.js --progress --display-modules --colors --display-reasons'
	}
	// webpack 指定  文件 打包过程 打包模块 字体彩色 打包原因
	
	*执行 webpack => npm run webpack

4.entry 三种方式 
	*__dirname + str
	*[__dirname + .js,__dirname + .js]
	=>filename : '输出.js'
	*
		{
			main: __dirname + .js
			a: __dirname + .js
		}
	=> filename : '[name]-[hash].js'
	=> filename : '[name]-[chunkhash].js'
	hash 值不变  chunkhash 是否修改文件 如果修改 hash改变

自动生成在项目中的html页面上
 	
5.	* 当引用 [chunkhash].js 文件名不确定时（打包后把js自动插入到html文件中）
  npm install html-webpack-plugin --save-dev
  .config.js 引用
	var htmlWebpackPlugin= require('html-webpack-plugin')
	{
		plugins: [
			new htmlWebpackPlugin({
				filename: 'index-[hash].html', /*生成目名称*/
				template: 'index.html',
				inject: 'head', /* 放在head||body里 */ 
				date: new Date(),
			})
		]
	}
6. 参数调用
	.html 调用  <%= htmlWebpackPlugin.date %>
	打包后的js <%= htmlWebpackPlugin.options.chunks.main.entry %>
7. publicPath 替换本地路径
output:{
	publicPath: 'http://cdn.com/' /*上线需求*/
}

8. 自动生成在项目中的多个html页面上
{
		plugins: [
			new htmlWebpackPlugin({
				chunks:['main']    选择
				excludeChunks:['main'] 排除
			}),
			new htmlWebpackPlugin({})
		]
	}
	

js loader
cnpm install --save-dev babel-loader babel-core
cnpm install --save-dev babel-preset-latest

css
后处理（flex 兼容） cnpm install --save-dev postcss-loader
浏览器前缀 cnpm install --save-dev autoprefixer

less
cnpm install --save-dev less
cnpm install --save-dev less-loader

sass
cnpm install --save-dev sass
cnpm install --save-dev sass-loader

html
cnpm install --save-dev html-loader


img
cnpm install --save-dev file-loader

cnpm install --save-dev url-loader
如果打包的图片或是文件 大于limit值 会丢给file处理 小于 把图片或是文件专程base64编码 不再是URL 而是一段编码

处理项目中引入的文件
1.base64编码
2.url的方式 http请求
	浏览器使用http请求优势：载入图片 使浏览器图片缓存
	

cnpm install --save-dev image-webpack-loader

实例：
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};