webpack 入门（一）

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 入门（二）