webpack是什么?
webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包,
它能Grunt/Gulp所有基本功能。
webpack是一款模块加载器兼打包工具,
它的功能就是能把各种资源(比如:JS[含JSX],coffee,css[less/sass],图片)都作为模块来使用和处理。
为什么要使用webpack?
因为网页功能越丰富的应用,它们就拥有更复杂的JavaScript代码和一大堆
依赖包。为了简化前端开发的复杂度,我们可以把复杂的程序细化为小的文件,可以用Sass,Less预处理器等等方法。
这些方法虽然大大提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让
浏览器识别,而手动处理有非常繁琐,但是前端的打包工具的出现解决了这些需求而不用手动处理。
我们为什么要使用打包工具?原因和原理?
因为现在js代码被使用在页面上。添加了很多内容在浏览器上。
对于模块的组织,通常有这几种方法:
1.写在外部js文件中,以script标签的形式引入到页面中进行加载。
2.
CommonJS进行加载(
NodeJS就使用这种方式)
3.
AMD进行加载(
require.js使用这种方式)
4.
ES6模块
思考:为什么只有js需要被模块化管理,前台的很多预编译内容,不需要管理吗?
基于以上的思考,webpack项目有如下几个目标:
将依赖树拆分,保证按需加载
保证初始加载的速度
所有静态资源可以被模块化
可以整合第三方的库和模块
可以构造大系统
webpack的特点
1.丰富的插件,方便进行开发工作
2.大量的加载器,包括加载各种静态资源
3.代码分割,提供按需加载的能力
4.发布工具
webpack的优势/点
- 支持commonJS和AMD模块。
- 支持很多模块加载器的调用,可以使模块加载器灵活定制,比如babel-loader加载器,该加载器能使我们使用ES6的语法来编写代码。
- 可以通过配置打包成多个文件,有效的利用浏览器的缓存功能提升性能。
- 使用模块加载器,可以支持sass,less等处理器进行打包且支持静态资源样式及图片进行打包。
1.webpack是以
commonJS的形式来书写脚本,但对
AMD/CMD的支持也很全面,方面旧项目进行代码迁移。
2.能被模块化的不仅仅是JS。
3.开发便捷,能替代部分grunt/gulp的工作,比如打包,压缩混淆,图片转base64等。
4.扩展性强,插件机制完善,特别是支持react热插拔(见react-hot-loader)的功能让人眼前一亮。
1.
首先在node环境下Install webpack
2.然后进行对webpack的配置
每个项目下都必须配置一个webpack.config.js,它的作用如同常规的gulpfile.js/Gruntfile.js,就是一个配置项,
告诉webpack它需要做什么
例子:
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
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'
}
}
};
1.plugins是插件项,这里我们使用了一个CommonsChunkPlugin的插件,它用于提取多个入口文件的
公共脚本部分,然后生成一个common.js来方便多页面之间进行复用。
2.entry是页面入口文件配置,output是对应输出项配置(即入口文件最终要生成什么名字的文件,存放到哪里)
3.module.loaders是最关键的一块配置。它告知webpack每一种文件都需要使用什么加载器
来处理。所有加载器需要使用npm来加载
4.最后是resolve配置,配置查找模块的路径和扩展名和别名(方便书写)
webpack目录:
src//存放源代码
dist//开发时引用的代码
tests//测试用例代码
build//构建完毕可以发布的代码
webpack和grunt/gulp的区别: