webpack文档1

webpack文档

1. 名词解释

bundle: 包

vendor ： 第三方库

2. 整体结构

webpack官网通过概念， 指南， 文档来讲解了webapck的发展和原理以及运用，通过模块化编程，进行每一个模块的依赖的注入。

2.1 概念

webpack官网对于概念主要是让读者简单的使用和了解webpack的工作原理，分别从12个方面讲述了webpack的基本使用。

1. webpack的入口起点(config.entry)

   1.1 单入口文件简单写法 entry: string

   let config = {
     entry: './src/index.js'
   }
   export default config
   

   2.2 通过对象的entry: {name: 'path'}

   let config = {
     entry: {
       main: './src/index.js';
       vendors: ['lodash', 'jquery']
     }
   }
   

   一般使用对象的形式，主要有2个用途

   • 分离第三方库和公共模块
   • 多页面应用配置

2. webpack的出口文件 (config.output)

   对于output我们需要注意2点，

   • path必须是绝对路径
   • 不管配置有多少个起点，output只有一个

   let config = {
     output: {
       filename: 'index.js',
       path: __dirname + '/dist'
       ....
     }
   }
   

3. 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']},
       ]
     }
   }
   

4. 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}
       })
     ]
   }
   

5. 配置

   webpack会默认的查找根目录下面的webpack.config.js来进行编译。

   也可以配置其他文件，通过命令行输入--config

   webpack --config example.config.js
   

6. 模块

   webapck支持nodeJs的模块引入和ES2015等不同的模块引入。

   import语句  // Es6
   require语句  //CommonJs
   define  // amd
   @import //引入css语句
   

   ​

   ​

   ​

7. ​