1.webpack是什么？

Webpack is a module bundler(模块打包⼯具)

Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块登程，辨认出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个独自的⽂件中。

2.装置webpack

2.1-环境筹备

nodeJs [https://nodejs.org/en/]

2.2-全局装置

    # 装置webpack V4+版本时，须要额定装置webpack-cli    npm install webpack webpack-cli -g    # 查看版本    webpack -v    # 卸载    npm uninstall webpack webpack-cli -g

2.3-我的项目装置（举荐）

    # 装置最新的稳固版本    npm i -D webpack    # 装置指定版本    npm i -D webpack@<version>    # 装置最新的体验版本 可能蕴含bug,不要⽤于⽣产环境    npm i -D webpack@beta    # 装置webpack V4+版本时，须要额定装置webpack-cli    npm i -D webpack-cli

#### 2.3-查看装置

    webpack -v //command not found 默认在全局环境中查找    npx webpack -v// npx帮忙咱们在项⽬中的node_modules⾥查找    webpack    ./node_modules/.bin/webpack -v//到以后的node_modules模    块⾥指定webpack

3.启动webpack执⾏构建

3.1-webpack默认配置

  • webpack默认⽀持JS模块和JSON模块
  • ⽀持CommonJS、 Es moudule、 AMD等模块类型
  • webpack4⽀持零配置使⽤,然而很弱，略微简单些的场景都须要额定扩大

3.2-筹备执⾏构建

  • 新建src⽂件夹

  • 新建src/index.js、src/index.json、src/other.js

       ### index.js   const json = require("./index.json");//commonJS   import { add } from "./other.js";//es module   console.log(json, add(2, 3));   、、、   ### index.json   {   "name": "JOSN"   }   ### other.js   export function add(n1, n2) {   return n1 + n2; }

    3.3- 执⾏构建

       # npx⽅式   npx webpack   # npm script   npm run test

批改package.json⽂件：

    "scripts": {        "test": "webpack"    }

3.4-构建胜利

咱们会发现⽬录下多出⼀个dist⽬录，⾥⾯有个main.js，这个
⽂件是⼀个可执⾏的JavaScript⽂件，⾥⾯蕴含webpackBootstrap
启动函数。

3.5-默认配置 webpack.config.js

    const path = require("path");    module.exports = {    // 必填 webpack执⾏构建⼊⼝    entry: "./src/index.js",    output: {    // 将所有依赖的模块合并输入到main.js    filename: "main.js",    // 输入⽂件的寄存门路，必须是绝对路径    path: path.resolve(__dirname, "./dist")     }    };

4.webpack.config.js配置办法

见webpack 入门（二）