webpack备忘录

2019独角兽企业重金招聘Python工程师标准>>>

开始

一开始用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命令，才能把所做的修改真正的编译成功

英文参考

转载于:https://my.oschina.net/boogoogle/blog/621703