webpack

安装webpack

了解更详细的信息请参考webpack官网
安装的前期是你已经安装了node.js和npm,启用终端通过命令,进入到你的项目目录，执行

1 2	npm init //生成package.json文件 npm webpack install --save-dev

测试有没有成功：
新建个hello.js文件,里面随便写个函数，然后通过执行

1	webpack hello.js hello-webpack.js // hello-webpack.js是打包后的文件

如果界面显示hash值和打包所用时间，就成功了。

webpack配置

经过本人使用，最重要的属于webpack配置了，我们可以手动建立一个webpack.config.js,也可以使用脚手架的方式。
步骤一.新建webpack.config.js
步骤二.进入该文件


module.exports={
	entry: "./main.js",   //项目入口文件，假设是main.js
	output: {
		path:__dirname,		//输出文件路径
		filename: "bundle.js" //输出文件名称，也或者可以使用占位符(name,hash,trunkhash)，filename:"[name]-[ hash].js"
		publicPath: "/js/"
	}，
	moudle:{
		loaders:[
			{
				test:/\.css$/,
				loader:"style!css!importloaders=1!postcss",
				exclude:/node_modules/,
				include:__dirname
			},
			{
				test:/\.js$/,
				loader:"babel",
				query:{
					presets:["es2015"]
				},
				exclude:/node_modules/,//排除范围
				inculde:   //处理范围
			},
			{
				test:/\.less/,
				loader:"style!css!postcss!less-loader"
			}
		]
	},
	plugins:{
		new htmlWebpackPlugin({
			filename:"index.html",
			template:"index.html",
			inject:"body"
		})
	}

安装babel及相关依赖

项目目录运行如下：

npm install –save-dev babel-loader babel-core
npm install –save-dev babel-preset-latest
npm install style-loader css-loader –save-dev
npm install webpack-dev-server –save-dev

处理sass,less文件

1 2	npm i less-loader –save-dev npm i postcss-loader –save-dev

处理html文件

1	npm i html-loader –save-dev

热加载

在package.json文件的scripts里面加入以下代码,可以看到你项目的进程，代码颜色，模块，打包理由

1 2	“webpack”:"webpack --config webpack-config.js --progress --display-moudle --colors --diplay-reason" "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"

2017-05-27