使用webpack5打包js文件

首先需要准备Nodejs环境，Nodejs中自带npm包管理工具，下载地址：http://nodejs.cn/download/

 

1、设置npm包安装路径

npm config set prefix="D:\environment\nodejs\node_global"

npm config set cache=" D:\environment\nodejs\node_cache"

2、安装webpack

npm install webpack -g
npm install webpack-cli -g

安装成功后会有如下2个文件夹：

 

3、设置环境变量

将如下地址添加到系统环境变量Path中：

D:\environment\nodejs\node_global

 

4、测试webpack命令

cmd测试：

在vscode控制台中测试：

ok，可正常使用。

 

5、使用webpack5打包js

初始化项目,生成package.json文件

npm init -y

如果需要使用jquery，使用如下命令安装：

npm install jquery -S

安装成功后，会生成node_moudules文件夹。

main.js 内容如下：

// 导入jquery
// import *** from *** 是ES6中导入模块的方式
import $ from 'jquery'

$(function(){
    $('li:odd').css('backgroundColor', 'red')
    $('li:even').css('backgroundColor', 'yellow')
})

在项目目录新增webpack.config.js文件，内容如下：

const path = require('path')
module.exports = {
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  },
  mode: 'development'
}

项目结构如下：

此时在vscode控制台输入命令：  webpack  即可打包js

打包成功后，dist目录下会生成bundle.js 文件， index.html中可通过script标签引入使用。