webpack 学习1

最新推荐文章于 2022-03-13 10:23:51 发布

爱生活，爱编程

最新推荐文章于 2022-03-13 10:23:51 发布

阅读量267

点赞数

分类专栏： webpack4.x-5.0

本文链接：https://blog.csdn.net/qq_15009739/article/details/104554288

版权

这篇博客介绍了如何开始学习webpack，包括安装、创建项目、配置webpack.config.js文件，明确了webpack的入口(entry)和出口(output)概念，并强调了正确引入js和css的方式。通过实践，成功搭建了webpack的基本构建环境。

摘要由CSDN通过智能技术生成

疫情让人心浮动，而我们学习必须要静下心来，今天我们就开启 webpack 学习之路

我们学习千万不要着急，慢慢来，这个webpack构建工具很简单的，希望大家在写博客中就学会了！

首先要装node ,我就不说了，其次要npm i webpack -g npm i webpack-cli -g

然后新建的文件夹，然后npm init -y

然后在项目中，再装一遍 npm i webpack webpack-cli -D 这样就行了，剩下的就是写

webpack.config.js (webpack 编译打包，构建的配置文件）

在这里我们要首先要明确 webpack 是个工具，它可以将js 打包到目标js 中！

webpack 通过loader 和编译器，可以将 css 图片资源编译打包到目标文件夹内！

好，废话少说，我们继续！

webpack 中有这几个概念

entry 入口，非常简单，就是说要处理的话，以哪一个文件作为入口！

任何程序的运行都需要入口，java 中，Main 函数， c 中也是 main

而我们用webpack 工具时，可以手动指定入口文件，一般是index.js

output 是出口！就是打包编译到哪一个文件中！也就是目标文件！

行，我们先写个配置文件！

webpack.config.js

const {resolve} = require("path");

module.exports = {
    
    entry: "./src/index.js",
    output:{
        filena

关注

专栏目录