webpack5入门教程：本地安装与基础配置

需积分: 10 199 浏览量更新于2024-08-05 收藏 168KB MD 举报

“webpack5.md 文档 - 有关webpack5的基础知识和配置介绍。” Webpack 是一个流行的模块打包工具，尤其在JavaScript应用开发中广泛使用。Webpack 5 是该工具的最新版本，带来了许多改进和新特性。这篇文档将引导你了解如何开始使用Webpack 5，并进行基础配置。 ### 1. 安装Webpack 5 和 webpack-cli Webpack 的本地安装通常通过npm（Node.js的包管理器）完成。首先，在你的项目目录下创建一个新的文件夹，初始化npm，然后安装Webpack和webpack-cli作为开发依赖： ```bash mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev ``` 这里的`-save-dev`标志表示这些包仅在开发环境中使用。 ### 2. 项目结构与文件接下来，建立如下的项目结构： ``` webpack-demo |-- package.json |-- index.html |-- /src | |-- index.js ``` ### 3. 编写源代码在`src/index.js`文件中，编写一个简单的JavaScript函数，如文档中的`component()`函数，它依赖于lodash库来组合字符串。注意，当前lodash是通过外部脚本链接引入的。 ```js // src/index.js function component() { const element = document.createElement('div'); // 引入lodash库 element.innerHTML = _.join(['Hello', 'webpack'], ''); return element; } document.body.appendChild(component()); ``` ### 4. 创建HTML入口文件在项目根目录下创建`index.html`，它引用了lodash库和自定义的`src/index.js`脚本。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>起步</title>  <script src="https://unpkg.com/lodash@4.17.20"></script> </head> <body> <script src="./src/index.js"></script> </body> </html> ``` ### 5. 调整package.json 为了防止意外发布代码，你需要更新`package.json`文件，将项目设置为私有并移除`main`字段： ```json { "name": "webpack-demo", "version": "1.0.0", "private": true, // 添加私有属性 "scripts": { /* ... */ }, "devDependencies": { /* ... */ } } ``` ### 6. 配置Webpack 虽然文档中没有直接提到，但配置Webpack是必不可少的步骤。创建一个名为`webpack.config.js`的文件，定义入口点和输出路径： ```js // webpack.config.js module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' } }; ``` ### 7. 运行Webpack 现在，你可以使用webpack-cli来编译你的代码： ```bash npx webpack ``` 这将在`dist`目录下生成一个`bundle.js`文件，包含了你的应用代码和所有依赖。更新`index.html`，删除外部引用的lodash和`src/index.js`，改用新生成的`bundle.js`： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>起步</title> </head> <body> <script src="./dist/bundle.js"></script> </body> </html> ``` 至此，你已经成功地设置了Webpack 5的基本工作流程。这只是Webpack功能的冰山一角，它支持各种插件、加载器、优化策略等，可以满足复杂的前端构建需求。随着对Webpack的深入学习，你会发现它能帮助你构建高效、模块化的现代Web应用。

qiao_0514

粉丝: 0
资源: 7

webpack5入门教程：本地安装与基础配置

Webpack5项目升级与配置优化指南

md-vue-loader：Webpack加载器的详细介绍

Webpack 4多页应用打包实践与代码结构分享

Webpack笔记.md

webpack.md 介绍文档

webpack-study.md

webpack套装.zip

nodeJS相关技术文档.md

webpack5 文档资料

node+模块化+Webpack.pdf

最新资源