Webpack 项目初始化与打包配置详解

Webpack 基础设置

首先，新建一个项目文件夹。

在项目根目录下创建两个子文件夹：src 和 dist。src 文件夹用于存放开发过程中编写的 JavaScript、CSS 等源文件；dist 文件夹则用于存放打包后生成的 bundle.js 文件。

确保项目中已安装 Node.js 环境。

在终端（terminal）中输入命令 node -v，检查是否显示 Node.js 的版本号，以确认安装成功。

确保项目中已安装 Webpack。

在终端中输入命令 webpack -v，检查是否显示 Webpack 的版本号，以确认安装成功。

可以在终端中执行以下命令进行打包：

webpack ./src/main.js ./dist/bundle.js

该命令会将 src 文件夹下以 main.js 为入口文件的所有依赖文件打包，并输出到 dist 文件夹中的 bundle.js 文件中。

由于每次手动输入该命令较为繁琐，可以通过配置简化命令来实现。

创建 webpack.config.js 配置文件。

在文件中写入如下配置代码：

//去node中找一个叫'path'的包
const path = require('path')
 
//动态获取绝对路径需要用到node语法
module.exports = {
    entry: './src/main.js',//这是入口路径
    output: { //output出口需要写成一个类的形式
        path: path.resolve(__dirname, 'dist'),//这是动态的获取的绝对路径
        filename: 'bundle.js'
    },
}

使用 Node.js 需要配合 npm 工具。在终端中输入 npm init 命令，会自动生成 package.json 文件。在 package.json 的 scripts 字段中添加构建脚本。

配置完成后，即可在终端中通过输入 npm run build 命令来执行代码打包。

关于 Loader

Webpack 默认能自动处理 JavaScript 文件之间的依赖关系。但在实际开发中，除了基本的 JS 代码，还需要加载 CSS、图片等资源，将 ES6 语法转换为 ES5，将 TypeScript 转换为 ES5，将 scss/less 转换为 CSS，以及将 .jsx 或 .vue 文件转换为 JS 文件等。Webpack 本身不支持上述操作，需要借助 Loader 来实现。

loaders | webpack 中文网 (webpackjs.com)

可以访问该页面查看 Webpack 支持的所有 Loader 列表。

添加对 Loader 的依赖通常需要在终端中执行 npm install 命令，然后在 webpack.config.js 文件中添加相应的配置。

关于 npm install 安装包时常见的报错解决方法：

在包名后面加上 --legacy-peer-deps 参数。

例如执行以下命令：

与文件压缩相关的配置学习

UglifyjsWebpackPlugin 插件

使用方法如下：

在终端中输入以下命令安装插件：

npm install --save-dev uglifyjs-webpack-plugin@1.1.1 --legacy-peer-deps

在 webpack.config.js 文件中引入相关模块：

const HtmlWebpackPlugin = require('html-webpack-plugin')

并在 plugins 数组中添加插件实例：

new UglifyjsWebpackPlugin()

这样配置后，可以将生成的 bundle.js 文件压缩为一行代码，从而减小文件体积。

总结

到此这篇关于 webpack 创建项目并打包的文章就介绍到这了，更多相关 webpack 创建项目并打包内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！