webpack初识
2016-12-10 20:45
176 查看
简介
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: 9fa910873e58523669b8 Version: webpack 1.14.0 Time: 2779ms Asset Size Chunks Chunk Names app.js 2.24 kB 0 [emitted] app app2.js 2.03 kB 1 [emitted] app2 common.js 907 kB 2 [emitted] common.js
小结
初学,文章记录不供参考,错了不负责。。参考
极客学院react常用工具相关文章推荐
- webstorm修改文件,webpack-dev-server不会自动编译刷新
- Webpack打包工具实时更新操作(启用观察者模式)
- Webpack学习
- WebPack常用功能介绍
- es6通过babel转码之后,还需要使用webpack才可以使用import关键字吗
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(下扩展)
- Webpack - [HMR] Hot Module Replacement is disabled
- webpack使用时可能出现的问题
- webpack中的不足--Tree-shaking
- gulp/grunt和browserify/webpack的区别
- webpack教程
- webpack配置
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(下)
- 【webpack】 模块加载器兼打包工具
- webpack入坑之旅
- webpack-dev-server
- WebPack常用功能介绍
- webpack入门——webpack的安装与使用
- webpack入坑之旅(一)入门安装
- 入门Webpack,看这篇就够了