手把手从0创建webpack并部署到本地服务器

最新推荐文章于 2025-04-18 18:35:09 发布

画一生情入颜容

最新推荐文章于 2025-04-18 18:35:09 发布

阅读量4.4k

点赞数 2

分类专栏：原创文章标签： webpack

本文链接：https://blog.youkuaiyun.com/csdn_zsdf/article/details/81710635

版权

本文手把手教你如何从头创建webpack配置，并将其部署到本地服务器。通过逐步讲解，包括设置webpack、webpack-cli、创建项目结构、处理不同类型的文件、配置webpack.config.js、使用webpack-dev-server实现热更新，帮助你理解并掌握webpack的基本用法。

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

webpack是js应用程序的静态资源的模块打包器，webpack在处理应用时，在内部会有一个各个模块的依赖图，然后将所有同类型的静态文件资源打包成一个或者多个bulder。
相信的初学者看到webpack是一脸懵逼，好不容易学会了一种前端框架，但在大型项目中的webpack也是必不可少的，所以有时候需要自己去动手改造一下webpack，接下来就是消除对webpack的恐惧和逃避心理，从建立一个js文件开始逐步实现webpack的打包以及部署到本地服务端。让你看到webpack不再逃避，而是很有兴趣去研究它。
这里写图片描述

这个是网上经常出现的关于webpack作用的形象图。
在使用的webpack4版本和以前的版本略有不同。

先下载webpack和webpac-cli，4版本以后，webpack-cli和webpack分开了，两者都使用全局安装
接下来创建一个文件夹，底下包含一个简单的html，js，css文件，这个就是我们从0实现webpack的打包部署的第一步。

简单的目录如下：这里写图片描述

index.js文件是项目的入口文件，所有有关的依赖都将在这个文件中进行处理。
middle.js是一个js文件，将被在index.js中调用。
style.css是一个css的样式文件，也将在index.js中引用。

    // miidle.js
    const json = {
        str : '第一个webpack打包文件'
    }
    moudule.exports = json

    // style.css
    .mian {
        background: '#f7f7f7',
        color: 'lightgreen'
    }

    // index.js
    const json = require('./middle.js')
    require('!style-loader!css-loader!./style.css')

    document.write(`<div class = 'main'>${json.str}</div>')

由于webpack不支持非js文件的直接打包，所以我们需要对css进行打包的时候，使用style-loader和css-loader，顺序不能反。
先下载这两个依赖包，然后在进行引用，下载方法就是正常下载。不做介绍。
index.html中引入一个不存在的目录./dist/main.js’，先不要管，就这样用