webpack备忘录

开始

一开始用gulp实现js和css文件的打包,减小了请求,同时经过gzip等压缩方法也能控制文件的大小.可是后来文件愈来愈多,包越打越大.同时还有了如下需求:

• 按需加载
• 模块化开发
• 文件修改自动更新
• 图片自动合并

因而gulp就不够用了.可是伟大的爱折腾的前端程序员们又搞出了webpack这货.咱们能够把webpack想作是一个工厂,咱们把文件放在工厂入口,工厂的传送带会把把咱们的文件一步步的处理,而后在出口把加工好的文件给吐出来,.恩恩,吐出来的这些就是你和客户想要的了/吐.其实,gulp更多的是用来构建前端的工做流,而webpack是用来处理模块化和打包(bundle.js)等操做

安装

npm install -g webpack

功能

webpack是一个 MODULE BUILDER,目的是把"有依赖关系的各类文件"打包成一系列的"静态资源"

形式

它就是一个配置文件,只须要把配置规则写在一个叫作webpack.config.js文件里就好了

怎么写

• 配置文件分为三大块
  1. entry 入口,"webpack工厂"入口,也就是"源文件"地址
  2. output 出口,webpack加工完的文件放在哪里
  3. module 模块,配置用什么模块来处理什么类型的文件

module.exports = {
	entry:'./entry.js',
        //也能够是预先定义一个路径常量。而后这样写
        //entry:APP_PATH,//必须,webpack会自动找寻本目录下的index.js

	output:{
		path:__dirname,//必须
		filename:"bundle.js"//必须
	},

	module:{
		loaders:[//注意！！这里是中括号
			{
                         test:/\.css$/,
			 loader:'style!css'
			}
		]
	}
};

---

另:若执行webpack命令,出现'cannot find module 'webpack/lib/node/NodeTemplatePlugin'错误时: 须要设置NODE_PATH 具体见网页这里

若遇到错误 "Error: %1 is not a valid Win32 application" 只须要升级python为3.X版本,可是此处我用的是sass-loader + win7 升级后依然如此,因而就把.sass改为了.css或者less也能够

加载css文件

须要先加载一个插件，执行以下命令

npm install css-loader style-loader

而后再loaders项目里添加如上内容

webpack-dev-server

在你修改完代码,而且保存后,这个插件会自动刷新浏览器

npm install -g webpack-dev-server --save-dev
//而后
webpack-dev-server --progress --colors

以后你能够打开

http://localhost:8080/webpack-dev-server/bundle

注意:这样你能够在上面的网址实时查看到全部的修改，可是这并不表明你的修改已经直接生效了。 在你修改完以后，你应该再执行一次webpack命令，才能把所作的修改真正的编译成功

英文参考