webpack学习（一）：初步配置webpack

女爷i 2022-04-06 05:27 245阅读 0赞

**demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]**

## 全局安装 ##

npm install --global webpack // --global代表全局安装

## 本地安装 ##

对于大多数项目, 我们建议本地安装, 这可以使我们在引入破坏式变更(breaking change)的依赖时, 更容易分别升级项目

npm install webpack // --global代表全局安装

## 开始搭建 ##

先创建一个目录 demo01 , 初始化 npm , 再本地安装 webpack 和 webpack-cli (如果使用 webpack 4+ 版本, 你还需要安装 webpack-cli , webpack-cli 是用于在命令行中运行 webpack )

mkdir demo01 //创建一个目录demo01
    cd demo01 //进入demo01
    npm -init -y //初始化npm, -y代表参数全部默认
    npm install webpack webpack-cli --save-dev //这里本地安装webpack和webpack-cli, --save-dev代表保存在package.json文件里

## 配置 webpack 目录结构 ##

接下来将创建一个如下的文件目录

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webpack-demo01</title>
    </head>
    <body>
    <script src="bundle.js"></script>  //引用出口文件, 因为bundle.js是webpack打包出来的文件
    </body>
    </html>

**index.js**

import _ from 'lodash';
    
    function component() { 
        var element = document.createElement('div');
    
        element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法
    
        return element;
    }
    
    document.body.appendChild(component());

要在 index.js 中打包 lodash 依赖, 我们需要在本地安装 lodash:

npm install --save lodash

## 使用 webpack 配置文件 ##

**webpack.config.js**

const path = require('path'); //node自带的path模块
    
    module.exports = { 
        entry: './src/index.js', //入口文件配置
        output: {  //出口文件配置
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    };

## 使用 webpack-cli 在命令行中运行 webpack ##

使用 webpack 命令打包, 如果是全局安装了webpack, 直接在终端输入webpack, 如果是本地则需要加上前缀目录 ./node\_modules/.bin/webpack , 如果是 Node 8.2+ 版本, 可以输入 npx webpack, Node 8.2+ 提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件(./node\_modules/.bin/webpack)

webpack// 全局安装的情况下
    ./node_modules/.bin/webpack //局部安装的情况下
    npx webpack // Node 8.2+

打开index.html  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
webpack打包成功, 这里index.html引用的是bundle.js, 而js代码写在index.js里, 说明webpack将入口文件的js打包输出到了bundle.js, index.html可以引用到里面的js, 输出了来自index.js的内容

## 使用NPM脚本代替 webpack-cli 命令 ##

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便(也就是在命令行输入npx webpack), 我们可以设置一个快捷方式, 在 package.json 添加一个 npm 脚本(npm script):  
**package.json**

{ 
      "name": "demo05",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack" //在这一行添加这个字段
      },
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "webpack": "^4.27.1",
        "webpack-cli": "^3.1.2"
      },
      "dependencies": { 
        "lodash": "^4.17.11"
      }
    }

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令, 意思就是npm帮忙运行webpack, npm会在自动在webpack加上目录前缀, 也就说相当于在命令行输入./node\_modules/.bin/webpack

npm run build //相当于./node_modules/.bin/webpack

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/3399a82003a249d38e66868db62e00f8.png