初识webpack与webpack环境搭建

Posted 2022-12-07 IT人.阿标

文章目录

• 认识webpack配置文件
• webpack配置结构
• 环境搭建安装Node.js和NPM
• • NVM安装
  • Nodejs和NPM安装
• 环境搭建安装webpack和webpack-cli
• • 创建空目录和package.json
  • 安装webpack和webpack-cli
• 简单的DEMO
• • 手动创建webpack配置文件
  • 创建项目源文件
  • 执行打包命令
  • 小技巧

认识webpack配置文件

webpack默认配置文件：webpack.config.js

可通过webpack --config 指定配置文件

例如我们再开发环境将配置文件命名为webpack.dev.config.js，那么我们在使用webpack打包开发包时候，就需要指定配置文件：webpack --config webpack.dev.config.js，否则就会提示’No configuration file’错误

webpack配置结构

首先我们来看看最简单的配置文件webpack.config.js

module.exports = 
    entry: './src/index.js',                //打包入口文件(如果是单个入口就是字符串，如果是多个入口就需要配置成对象)
    output:                                //打包输出文件
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js"
    ,
    mode: 'production',                      //环境
    module: 
        rules: [                            //Loader配置
            test: /\\.test$/, use: 'raw-loader'
        ]
    ,
    plugins: [new htmlWebpackPlugin(
        template:"./src/index.html"
    )]

环境搭建安装Node.js和NPM

在使用webpack之前，我们需要安装nodejs和npm，因为webpack是依赖nodejs的环境

我们这里使用nvm来管理nodejs和npm，我们首先需要安装NVM

NVM安装

安装命令（MAC系统）：

brew install nvm

注意一般完成安装以后，立马执行nvm是会提示找不到命令，我们需要执行source命令刷新环境变量或者重启电脑即可。

Nodejs和NPM安装

这里安装NodeJs V16.14.0，NPM版本为8.3.1

我们可直接通过nvm进行安装，如需切换不同的nodejs版本，可直接通过nvm安装和切换（具体方法自行百度）

安装命令（MAC系统）

nvm install v16.14.0

安装完以后就会自动完成nodejs和npm安装，使用node -v和npm -v查看当前版本信息

环境搭建安装webpack和webpack-cli

webpack4以后，webpack将webpack和webpack-cli分离开来，所以两者都需要手动安装

创建空目录和package.json

• mkdir webpack-demo
• cd webpack-demo
• npm init -y

npm 官方提供了 npm init 命令帮助我们快速初始化 package.json 文件

-y表示直接使用默认值创建package.json

注意我们创建package.json同时可能会存在package-lock.json文件，该文件是锁定安装时的包的具体版本号，并且需要上床到git的，用来保证其他人再npm install 时候大家所引用的依赖版本一致性。

安装webpack和webpack-cli

• npm install webpack webpack-cli --save-dev
• 检测是否安装webpack成功：./node_modules/.bin/webpack -v

安装完webpack以后，webpack被安装到了当前项目下：./node_module/.bin下

完成上述安装步骤以后，会得到以下工程结构：

我们环境到此已经搭建完成，我们执行打包命令会提示出现各种必须的文件不存在。这是因为我们工程到这里只是完成了package.json的初始化，还并没完成webpack的配置。接下来我们需要创建简单的demo工程来完成打包。

简单的DEMO

手动创建webpack配置文件

• 首先我们需要创建简单的webpack的配置文件webpack.config.js

  'use strict';
  
  const path = require('path');
  
  module.exports = 
      entry: './src/index.js',
      output: 
          path: path.join(__dirname, 'dist'),
          filename: "bundle.js"
      ,
      mode: 'production'
  手动创建webpack
  

创建项目源文件

• 创建src目录，在目录下创建helloworld.js

  export function helloWorld() 
      return 'Hello World!'
  
  

• 创建index.js

  import helloWorld from "./hellowrold";
  
  document.write(helloWorld());
  

执行打包命令

完成上述步骤以后，可以执行打包命令打包了，下面webpack打包命令

./node_modules/.bin/webpack

打包完成以后，会在项目根目录下面生成dist文件夹，输出打包目录（在webpack.config.js配置文件中配置）,最终结构如下：

好了，到了这里webpack的介绍已经完成， 下一文章我们一起来学习下webpack的核心概念。

小技巧

我们每次执行编译打包命令的时候，每次都需要进入到项目下./node_modules/.bin下面执行webpack命令打包，比较的繁琐，其实实际项目中，我们是通过再package.json中配置script，实现npm run build命令打包。

原理：我们再安装Module的时候，如果有依赖一些命令，模块局部安装会在node_modules/.bin目录下创建软链接。我们的package.json会默认读取到.bin目录下的这些命令，所以可以直接再package.json增加一个script，在script里面指定webpack，那么执行指定命令的时候会到.bin目录下去寻找。

配置结果如下：

这样我们就可以再项目目录下直接通过

npm run build

通过上面地命令进行打包了。