关于javascript: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 入门（二）