webpack——基础

webpack——基础

---

１. 什么是webpack

1. webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

２. 前端模块化

1. 前端模块化的方案：AMD，CMD，CommonJS，ES6
2. 在ES6之前，模块化开发需要借助其他的工具，还需要处理模块间的各种依赖
3. webpack其中一个核心就是 进行模块化 开发，并且会处理模块间的依赖
4. js文件，css文件，图片，json文件等等在webpack中都可以被当做 模块来使用

３. 打包

1. 打包如何理解？
   就是将webpack中的各种资源模块 进行打包合并成一个或者多个包bundle，并且在打包的过程中还可以对资源进行 处理，比如压缩图片，将less转成css。将ES6语法转成ES5语法，将TypeScript转成JavaScript等等

4. webpack node npm 的关系

5. webpack安装

1. 安装webpack需要安装node（webpack依赖node环境）
   node -v
2. 全局安装webpack(@后面是版本号)
   npm i webpack@3.6.0 -g
3. 局部安装webpack
   npm i webpack@3.6.0 --save-dev
4. 为什么全局安装后，还需要局部安装
   ①在终端执行webpack命令，使用的是全局安装的 webpack
   ②当在package.json中的scipts定义了之后，那么使用的是局部的webpack
   ③scripts中定义 ："build": "webpack" 运行 npm run build 就可以了

6. js文件打包

1. Js文件中使用模块化方式进行开发，是不可以直接使用的。
   因为如果直接在index.html引入这两个js文件，浏览器不会识别其中的模块化代码。
2. 使用webpack工具打包
   Wepack就是一个打包工具。所以它支持我们代码中写模块化,可以对模块化的代码进行处理，处理完所有模块之间的关系后，将多个js打包到一个js文件中。引入时就变得非常方便。
3. webpack如何打包？
   webpack stc/main.js dist/bundle.js

7. package.json中定义启动

1. 可以在package.json中的scripts中定义自己的执行脚本。
2. package.json中的scripts脚本在执行时，会按照一定的顺序寻找命令对应的位置。
3. 首先会寻找本地的node_modules/.bin路径中对应的命令，如果没找到，会去前期的环境变量中寻找。
4. npm run bulild

8. webpack 配置——webpack.config.js

const path = require('path') //依赖node中的path模块 引入path 

module.exports = {
    entry: './src/main.js',  //入口文件
    output: {
        path: path.resolve(__dirname,'dist'), //出口文件位置
        filename: 'bundle.js'//打包到指定文件的名称
    }
}