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