webpack学习之helloworld(一)

最新推荐文章于 2021-09-13 19:31:17 发布

凡夫俗子Z

最新推荐文章于 2021-09-13 19:31:17 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发

本文链接：https://blog.youkuaiyun.com/u012499210/article/details/83474517

web前端开发专栏收录该内容

42 篇文章

订阅专栏

本文介绍了webpack的基本概念，以及如何从零开始搭建一个简单的'Hello, World!'项目。通过创建项目目录，安装webpack和webpack-cli，配置webpack.config.js文件，引入lodash并实现字符串连接功能，最后打包并运行项目。在学习过程中，作者遇到了路径问题，通过使用path.resolve解决了找不到源文件的问题。更多详细的webpack入门教程可参考webpack官网。" 120992365,783471,Scrapy 自定义导出器实战：理解与实现,"['爬虫', 'Python', '数据导出']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、webpck是什么

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle

2、从零搭建一个helloworld

2.1 安装webpack

2.1.1 创建helloworld项目 mkdir webpack-hellowrld

2.1.2 安装webpack(webpack4需要安装webpack-cli) npm init -y (-y直接跳过提问阶段)，npm i webpack webpack-cli --save-dev

2.1.3 创建配置文件webpack.config.js，index.js文件，html文件，

2.1.4 实现使用lodash的 join 连接字符串，在网页中输出字符串

2.1.5 npm安装lodash，在index.js中import lodash的join方法，输出text

import { join } from 'lodash';

function component() {
    var element = document.createElement('div');

    element.innerHTML = join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

2.1.6 配置webpack.config.js文件，入口文件为index.js文件，出口文件输出到dist文件下

const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, '..', 'src/index.js'),
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, '..', 'dist')
    }
}

2.1.7 使用命令打包webpack --config build/webpack.config.js

2.1.8 webpack创建dist文件在dist中生成打包文件，然后再index.html中引用index.js文件

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>webpack-hellowrld</title>
    </head>
    <body>

    </body>
    <script src="./dist/index.js"></script>
</html>

学习过程中遇到的问题:

1、在webpack.config.js中使用（..）相对路径，一直无法找到src/index.js文件，后来用path.resolve获取文件的路径，

_dirname为当前模块的绝对路径

这只是我学习的过程记录。创建你的webpack hellowworld前往webpack官网有更完整的演示：https://webpack.docschina.org/guides/getting-started/,