webpack初识
来源:互联网 发布:自学编程成才的人 编辑:程序博客网 时间:2024/06/03 11:24
简介
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
Webpack是加强版Browserify
从诞生之初,Webpack瞄准的就是大型单页应用(成百上千的模块)
Webpack有一定上手难度
原理
在webpack中,所有的静态资源都是模块,都可以用在依赖中。经过webpack处理后,就会变成右边的文件。
与browserify的区别
- webpack包含所有的静态资源,而browserify不包括图片这样的文件。
- webpack自动处理页面依赖关系(code splitting),browserify需要手动指定(很重要的一点)。
Webpack的两大特色:code splitting和loader
- code splitting可以自动完成,不需要手动处理。他可以根据页面自动加载相应的资源。
- loader可以处理各种类型的静态文件,并且支持串联操作。比如gulp中的.pipe()继续.pipe()就是串联操作。
配置
执行webpack命令时,它会自动找到目录下的webpack.config.js文件。所以确保这个配置文件存在。 npm install webpack -g
,npm install jsx-loader --save
。
module.exports = { entry: './app.jsx', // 指定入口文件 output: { // 输出 path: './', // 输出的文件路径 filename: 'app.js' // 输出的文件名 }, module: { loaders:[ test: /\.jsx$/, // test任意写,匹配正则表达式。 loader: 'jsx-loader', // 将jsx转换为js ] }}
// 多个文件var webpack = require('webpack')module.exports = { entry: { app: './app.jsx', // 键随意 app2: './app2.jsx' }, output: { path: './', filename: '[name].js', // 使用name将读入文件的名字赋给输出文件 }, plugins: [ new webpack.optimize.CommonsChunkPlugin("common.js") // 将通用代码生成common.js,需要引入weback ], module: { loaders: [ { test: /\.jsx$/, loader: 'jsx-loader', } ] }}
// 输出格式Hash: 9fa910873e58523669b8Version: webpack 1.14.0Time: 2779ms Asset Size Chunks Chunk Names app.js 2.24 kB 0 [emitted] app app2.js 2.03 kB 1 [emitted] app2common.js 907 kB 2 [emitted] common.js
小结
初学,文章记录不供参考,错了不负责。。
参考
极客学院react常用工具
0 0
- 初识webpack
- webpack初识
- 初识webpack
- 初识webpack
- webpack初识
- webpack 初识
- 【webpack】——初识
- 初识 webpack vue项目
- 学习vue.js初识npm,webpack,CommonJS,AMD与CMD
- 作为一个英文不好的人初识Webpack经历
- 初识react之react+webpack+es6环境配置步骤整理
- WebPack
- webpack
- webpack
- webpack
- webpack
- Webpack
- webpack
- C++运算符重载(三)
- Install OpenCV 3.0 and Python 2.7+ on OSX
- Android 自动测试(指路,非操作贴)
- HDU 2039 三角形
- 数据结构——图—概念和存储(邻接矩阵,邻接表)
- webpack初识
- Leetcode Binary Watch 401
- GB2312简体中文编码表(转)
- 【每日一记】设计模式——代理模式
- Largest Rectangle in Histogram
- 数据结构实验之查找六:顺序查找
- C语言——蛇形代码的例子
- 编写一个webpack插件
- Manacher算法