每日自学总结

webpack

安装：
webpack 是一个使用 Node.js 实现的一个模块化代码打包工具。所以，我们需要先安装 webpack，安装之前需要搭建好 `Node.js 环境

npm install -D webpack webpack-cli

注：不推荐全局安装

如果出现一下问题：

需要在编辑器把package.json里的webpack修改一下

webpack-cli: 提供 webpack 命令、工具，类似 create-react-app

webpack : webpack 代码，类似 react
使用
webpack介绍：

• webpack是一个前端的资源构建工具,一个静态模块打包器(module bundler)

• 在webpack看来,前端的所有资源文件都会作为模块处理

• 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源
  

模块化:

就是把一个庞大的功能拆分成若干个小的功能,每个小功能是一个独立的模块，使用的时候导入，使用模块化编程，可以提高代码的复用性；

浏览器中没有模块化的功能，html使用script标签来导入多个js文件这些文件仅仅是前后拼接，然后读取文件内容，（导入的js文件顺序很重要），由于使用的js都在同一个作用域中，系统只要是编辑js文件就需要把所有的都编辑出来，需要注意变量名以及函数名是不是有冲突；nodejs提供的模块化功能，就可以避免上面的问题；
导入模块：

var index = require("./index");

导出模块：

module.exports = index;

打包流程：

• 引入js资源 引入样式资源 引入其他资源 都需要webpack以入口文件作为起点将资源打包，

• 将这些资源全都引进来形成一个代码块chunk，然后代码块在经过各项处理,这些操作统一概括就叫打包,

• 打包之后将这些处理好的资源输出出去,输出出去的文件叫bundle

webpack的五个核心概念：

1. Entry：入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构4部依赖图

2. Output：输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名

3. Loader：Loader 让 webpack 能够去处理那些非 JavaScript 文件 （webpack 自身只理解 JavaScript）

4. Plugings ：插件（Plugins）可以用于执行范围更广的任务，插件的范围包括,从打包优化和压缩,一直到重新定义环境的变量等

5. Mode：模式（Mode)指示 webpack使用和相应模式的配置

index.js: webpack入口起点文件

webpack运行指令:

• 开发环境：

webpack ./src/index.js -o ./build/buit.js --mode=development

webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js

	整体打包环境,是开发环境

• 生产环境：

 webpack ./src/index.js -o ./build/buit.js --mode=production

	webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js

	整体打包环境,是生产环境

webpack注意点：
1. 配置config.module.loaders属性时：

config.module = {
  loader: [{
    test: /\.css$/,
    loader: 'style!css'
  }]
}

或者

config.module = {
  loader: [{
    test: /\.css$/,
    loaders: ['style', 'css']
  }]
}

注意：
test后面接的是一个正则表达式，不要习惯性的加上了引号！！

如果使用字符串的形式是loader: ‘style!css’，如果使用数组的形式就是loaders: [‘style’, ‘css’]，key值变为了复数形式！
总结:

• webpack能处理js/json/资源，不能处理css/img等其他资源

• 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

• 生产环境比开发环境多一个压缩js代码