webpack文档
1. 名词解释
bundle: 包
vendor： 第三方库
2. 整体结构
webpack官网通过概念， 指南， 文档来讲解了webapck的发展和原理以及运用，通过模块化编程，进行每一个模块的依赖的注入。
2.1 概念
webpack官网对于概念主要是让读者简单的使用和了解webpack的工作原理，分别从12个方面讲述了webpack的基本使用。
-
webpack的入口起点(config.entry)
1.1 单入口文件简单写法
entry: stringlet config = { entry: './src/index.js' } export default config2.2 通过对象的
entry: {name: 'path'}let config = { entry: { main: './src/index.js'; vendors: ['lodash', 'jquery'] } }一般使用对象的形式，主要有2个用途
- 分离第三方库和公共模块
- 多页面应用配置
-
webpack的出口文件 (config.output)
对于output我们需要注意2点，
-
path必须是绝对路径 - 不管配置有多少个起点，output只有一个
let config = { output: { filename: 'index.js', path: __dirname + '/dist' .... } } -
-
webpack的预处理loader(config.module)
由于webpack把一切都当成模块，但是又只认识js语法，所以在运行之前需要把它不认识的内容转换成它认识的内容，这个就是
loader.entry => loader => webpack => output (中间的每一个环节可能都有plugins)
// 通过loader把样式转换成字符串运行 let config = { module: { rules: [ {test: /\.css$/, use: 'css-loader'}, {test: /\.styl$/, use: ['css-loader','stylus-loader']}, ] } } -
webpack的插件(config.plugins)
webpack的插件
plugins可以处理loader处理不了的问题，它贯穿webpack的整个过程，例如： 可以全局引用jquery的情况下，就是在webpack lifecycle before之前通过plugins来全局配置。也可以在webpack运行完后，通过插件给文件进行压缩。let config = { plugins: [ new webpack.ProvidePlugin( { jquery: 'jquery', $: 'jquery', window.jquery: 'jquery' } ), new webpack.optimize.UglifyJsPlugin({ compress: {warnings: false} }) ] } -
配置
webpack会默认的查找根目录下面的webpack.config.js来进行编译。也可以配置其他文件，通过命令行输入
--configwebpack --config example.config.js -
模块
webapck支持nodeJs的模块引入和ES2015等不同的模块引入。
import语句 // Es6 require语句 //CommonJs define // amd @import //引入css语句
-
