因为react接触webpack，一直用react脚手架里面现成的配置文件，使用webpack进行开发，最近研究一下webpack的API，做下学习笔记

概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

实现功能：

• 压缩CSS和JS文件

• 压缩IMG等图片资源

• 项目中直接使用LESS

• 直接使用ES6

Webpack支持Node.js模块格式的配置文件，默认使用当前目录下的webpack.config.js，配置文件为module.exports；其相关配置如下：

• entry 为项目入口文件
• output为构建文件的输出配置，其中publicPath表示构建结果最终被真正访问时的路径。线上项目为线上路径。
• loader 值为一个数组，每一项指定一个规则，其test字段则是规则的正则表达式，若被依赖模块的ID符合该正则表达式，则对依赖模块依次使用规则中loaders字段所指定的loader进行转换
• plugin 值为一个数组，每一项为一个plugin实例

1. entry

• 写单页面应用的时候 就一个入口 index.js

entry: {
   app: './src/app.js',
   vendors: './src/vendors.js'
 }

字符串形式;
数组形式，把数组中多个文件打包成一个文件 ;
对象形式，配置多页应用时需要采用，或者抽离指定模块做公共模块

• 多页面应用程序

入口文件有几个就会生成几个独立的依赖图谱。
entry: {
   pageOne: './src/pageOne/index.js',
   pageTwo: './src/pageTwo/index.js',
   pageThree: './src/pageThree/index.js'
 }

2. output

将所有的模块和资源打包完成后，总需要一个地方来放置它，output 就是做这个事情的，它指定了打包后的文件放置的位置，以及命名等信息。
其最基本配置包括filename和path两项。这两项用以决定上述主js文件的存储行为。

{
 entry: {
   app: './src/app.js',
   search: './src/search.js'
 },
 output: {
   filename: '[name].js',
   path: __dirname + '/dist'
 }
}
如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符([name])来确保
每个文件具有唯一的名称，此时输出的文件名是app和search。

3. module

首先webpack是一个JS模块打包器，基于NodeJS环境，本身只理解JS文件。在webpack的世界里，一切文件都是模块。如果要处理非JS文件，就需配置module。

概念：在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

webpack 将一切资源看做是一个个模块，然后将其加入依赖树中。任何类型的模块或者说资源文件，理论上都可以通过被转化为JavaScript代码实现与其他模块的合并与加载

webpack中的模块：ES2015 import；commonjs require()；AMD define 与 require；css/scss/less 中的 @import；存在于样式表中的 url() 或 html 中的 <img src=...> 的图片

4. loader

loader 用于对模块的源代码进行转换。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件

module: {
//识别文件类型，使用对应loader处理文件
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true//使用options等命令对loader进行进一步的配置。
            }
          }
        ]
      }
    ]
  }

关于loader能够做的事情：
转换编译：script-loader/babel-loader/ts-loader/coffee-loader等。
处理样式：style-loader/css-loader/less-loader/sass-loader/postcss-loader等。
处理文件：raw-loader/url-loader/file-loader/等。
处理数据：csv-loader/xml-loader等。
处理模板语言：html-loader/pug-loader/jade-loader/markdown-loader等。
清理和测试：mocha-loader/eslint-loader。

5. plugins

插件是webpack的支柱功能，许多功能都靠插件来实现：
抽离公共代码；
统一修改所有代码中的某些值；
对代码进行压缩；
去除所有的console
并且webpack内置了很多插件和第三方插件；

Babel 是一个 JavaScript 编译器

首先要下载babel相关插件，核心插件如下：

• 安装babel-loader

npm install babel-loader --save-dev

• 安装转码规则

npm install babel-preset-es2015 --save-dev

• 创建一个.babelrc文件

{
  "presets": [
    "es2015"//这里是转码规则 想要什么样的转码规则可以自行下载插件 然后将规则加到这里
  ],
  "plugins": []
}

• 在webpack配置文件中添加babel-loader配置

module.exports = {
  module: {
    rules: [
          {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
          },
     ]
  }
};

https://www.cnblogs.com/old-street-hehe/p/7116215.html

webpack样式编译器

css-loader与style-loader和autoprefixer(postcss-loader)

js文件中import了css文件，并且想要把css文件作为<style>的内容插入到模版文件，这时候我们要用到webpack的css-loader和style-loader，前者用于在js中加载css，后者把加载的css作为style标签内容插入到html中。另外，如果某些css要考虑到浏览器的兼容性(比如css3中的flex)，我们要webpack在打包的过程中自动为这些css属性加上浏览器前缀，这时就用到了postcss-loader和它对应的插件autoprefixer。
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

• 在webpack配置文件中添加css的loader配置

配置一：css会和js打包到同一个文件中，并不会打包为一个单独的css文件

module.exports = {

   ...
    module: {
        rules: [
             {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

配置二：将CSS文件打包为单独文件

const ExtractTextPlugin = require("extract-text-webpack-plugin");
//extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
module.exports = {
   ...
    module: {
       rules: [
            {
                test:/\.css$/,
                exclude: /node_modules/,
                // 抽取 css 文件到单独的文件夹
                //use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    //fallback:编译后用什么loader来提取css文件
                    publicPath: config.cssPublicPath,
                    // 设置 css 的 publicPath
                    use: [{
                        loader:"css-loader",
                        options:{
                            // 开启 css 压缩
                            minimize:true,
                        }
                    },
                        {
                            loader:"postcss-loader",
                        }
                    ]
                })
            }
        ]
    }
}

一点node的知识：

全局变量

__dirname：node中的全局变量，存储的是文件所在的文件目录
__filename：node中的全局变量，存储的是文件名

占位符

[id]:webpack给块分配的内部chunk id，如果你没有隐藏，你能在打包后的命令行中看到；
[hash]：每次构建过程中，生成的唯一 hash 值;
[chunkhash]: 依据于打包生成文件内容的 hash 值,内容不变，值不变；
[ext]: 资源扩展名,如js,jsx,png等等;
[name]:代表打包后文件的名称，在entry或代码中(之后会看到)确定；
requiare.resolve，读取文件绝对路径
参考文章
http://blog.csdn.net/meinanqihao/article/details/78217918
https://www.cnblogs.com/senjougahara/p/5350196.html