简单易懂的webpack入门

最新推荐文章于 2024-05-16 17:18:08 发布
最新推荐文章于 2024-05-16 17:18:08 发布
阅读量1.7k 收藏 1
点赞数 5
分类专栏： 配置 文章标签： nodejs webpack 前端 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_38095237/article/details/68491408
版权

简单易懂的webpack入门

本文比较初级且详细易懂适合没怎么接触过Webpack，而又对webpack感兴趣的人参考；
最近这些天有几个朋友在刚开始使用webpack中遇到问题，所以想写一篇自己的理解，因为水平有限但是尽力让本文一目了然；

nodejs与npm

webpack

  • webpack安装
  • webpack打包
  • loader——模块加载器

webpack配置说明

  • webpack.config.js基础配置
  • webpack-dev-server自动刷新页面
  • html-webpack-plugin自动生成页面

nodejs与npm

nodejs安装
http://nodejs.cn/————————————————————node官网下载安装nodejs
npm是随同NodeJS一起安装的包管理和分发工具
https://www.npmjs.com/———————————————↑npm官网↑

关于NPM的简单命令
win+R 弹出窗口 输入cmd 或 鼠标右键点击屏幕左下角win标 ->选择 命令提示符/命令提示符（管理员）
d:                  //进入你项目存放的盘;
cd demo             //进入项目内;
cd..                //返回上一层
XXXXX -v            //查看版本可用作验证是否安装成功 例如 webpack -v（webpack版本号）
----------------------------------------------------
npm init            //创建package.json文件;
一路回车即可后边想改的时候可以打开 package.json文件 更改
npm install 模块名 -g/--save-dev/--save  //安装模块; 
//-g    全局安装;
//--save        会把依赖包名称添加到 package.json 文件 dependencies 下       产品模式用;  
//--save-dev    会把依赖包名称添加到 package.json 文件 devDependencies 下    开发模式用;
例如 npm install react（当前目录下安装）npm install react -g（全局安装）//模块名=react 安装成功后文件下会多出一个node_modules文件夹;    安装的时候想加载依赖里边的话 就加上--save-dev
npm update 模块名  //更新模块; 
npm uninstall 模块名  //卸载模块; 
npm info 模块名  //查看版本号例如 npm info react;

webpack

webpack是模块加载器兼打包工具，Gulp与Grunt是一种能够优开发流程的工具，由于webpack的模块化的优点某种程度上可以替代而已。webpack的工作原理是通过配置唯一入口文件，将从这个文件开始找到你项目中所有依赖的文件，使用loaders处理它们并打包成为一个浏览器可识别的JavaScript文件。

安装webpack
在命令提示行内输入
    npm install webpack -g   //全局安装webpack
    webpack -v    //查看 webpack 版本号
    下面我们在demo文件夹下建立一个新的文件夹和一个新的html文件
    一个新的html文件例如 index.html
    命名随意 例如建立一个名为app的文件夹!在app内建立二个新的js文件例如index.js 与 app/js

这里写图片描述这里写图片描述

在app.js内写入

    module.exports = "我是app内文件的内容";

在index.js内写入

    var app= require('./app.js');                         //当前目录下
    document.body.innerHTML = "<div>"+app+"</div>";
    此方法可以将多个文件引入到 index.js内的入口文件内
    ------------------------------------------------
    另一种兼容的写法
    define(["./app.js"],function (str){
        document.body.innerHTML = "<div>"+str+"</div>"; 
        })
    此方法跟上边一种一样。推荐上一种方法;

用webapck打包

    webpack app/index.js build/build.js
            ↑入口文件     ↑打包到文件

    打开index.html编辑 打包后只用引入打包完的build.js
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>

        </style>
        <script>

        </script>
    </head>

    <body>
    <script src="build/build.js"></script>
    </body>
    </html>
    打开index.html

这里写图片描述这里写图片描述

安装loader——模块加载器

npm install css-loader style-loader //处理css文件和样式 不同的loader用空格隔开一次加载多个
更多的loader地址http://webpack.github.io/docs/using-loaders.html

webpack配置

module.exports配置项
    devtool: 'eval-source-map'//配置生成Source Maps，选择合适的选项
    entry：         //打包的入口文件  String|Object
    output：        //配置打包结果     Object
    path：          //定义输出文件路径
    filename：      //指定打包文件名称
    module：        //定义了对模块的处理逻辑  Object
    loaders：       //定义了一系列的加载器   Array
        [{
            test:   //正则，匹配到的文件后缀名
            loader/loaders：string|array，  //处理匹配到的文件
            include：String|Array  //包含的文件夹
            exclude：String|Array  //排除的文件夹
        }]
    resolve:{
        extensions:['.js',".css",'jsx']  //自动补全识别后缀
    }
在demo文件夹内建立一个新的js文件，名为webpack.config.js并且打开编辑
    module.exports = {
        entry:__dirname +"/app/index.js",
        output:{
            path: __dirname + "/build",
            filename:"build.js"
        },
        module:{
            loaders:[
                {
                    test: /\.css$/,
                    loaders:["style-loader","css-loader"]//添加对样式表的处理 现在的版本一定要加上-loader
                    //loader: 'style-loader!css-loader' 这种写法也是兼容的;
                }
            ]
        },
        resolve:{
            extensions:[".js",".css","jsx"]  //自动补全识别后缀
        }
    }

下面我们给刚才的文件加一些css
在app文件夹下新建一个 style.css文件且随便给点样式
    div{
        color: red;
        font-size: 50px;
    }
在index.js文件内编辑  且不用带文件后缀名了
    var app= require('./app');
    require('./style');
    document.body.innerHTML = "<div>"+app+"</div>";

webpack-dev-server自动刷新页面

安装
    npm install webpack-dev-server  -g
启动
    webpack-dev-server
    //启动成功后 键入http://localhost:8080/访问——默认的端口是8080可以根据配置文件设置;
    //如果端口号冲突的话可以更改一下
    webpack-dev-server --port 3000

//此时启动了服务器服务 
//打开index.html文件更改一下script的路径改成，因为热加载的时候刷新的页面 build.js 是在内存中生成的，那么内存中是不存在build文件夹的所以要去掉;
    <script src="build.js"></script>
//在npm下 ctrl+c 两次 关闭服务 重新键入
webpack-dev-server --hot --inline //热加载成功更改内容自动刷新页面

//文件的配置
    打开package.json编辑
    {
      "name": "demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build":"webpack-dev-server --hot --inline"
      },
      "author": "",
      "license": "ISC"
    }

//如果需要改端口
"build":"webpack-dev-server webpack-dev-server --port 3000 --hot --inlin"
//运行npm下输入 就不用繁琐的输入那么多了;
npm run build

重点就是如果本地的情况下index.html的路径 跟 热加载下的路径的改变原理就是前文所说的存在内存中与打包给本地;

webpack.config.js中去配置服务

module.exports = {
    entry:__dirname +"/app/index.js",
    output:{
        path: __dirname + "/build",
        filename:"build.js"
    },
    module:{
        loaders:[
            {
                test: /\.css$/,
                loaders:["style-loader","css-loader"]//添加对样式表的处理 现在的版本一定要加上-loader
                //loader: 'style-loader!css-loader' 这种写法也是兼容的;
            }
        ]
    },
    devServer: {
        port:"9000",//设置默认监听端口，如果省略，默认为”8080“
        hot:true,//热加载
        inline: true,//实时刷新
        historyApiFallback: false,//是否可以回退
    },
    resolve:{
        extensions:[".js",".css","jsx"]  //自动补全识别后缀
    }
}
配置项很多可以参考
http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

html-webpack-plugin自动生成页面

安装
    npm install html-webpack-plugin --save-dev
启动
    //在webpack.config.js中去配置头部引入
    var htmlWebpackPlugin = require('html-webpack-plugin');
    //并且添加plugins配置


    var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:__dirname +"/app/index.js",
    output:{
        path: __dirname + "/build",
        filename:"build.js"
    },
    module:{
        loaders:[
            {
                test: /\.css$/,
                loaders:["style-loader","css-loader"]//添加对样式表的处理 现在的版本一定要加上-loader
                //loader: 'style-loader!css-loader' 这种写法也是兼容的;
            }
        ]
    },
    devServer: {
        port:"9000",//设置默认监听端口，如果省略，默认为”8080“
        hot:true,//热加载
        inline: true,//实时刷新
        historyApiFallback: false,//是否可以回退
    },
    plugins:[
        new htmlWebpackPlugin({
            title:"我是那个新的"
        })
    ],
    resolve:{
        extensions:[".js",".css","jsx"]  //自动补全识别后缀
    }
}
//重新用webpack打包后 运行 npm run build 此时build 目录下会自动新生产一个html

打包两个或更多文件

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        build:__dirname +"/app/index.js",
        build_new:__dirname +"/app/index_new.js"
    },
    output:{
        path: __dirname + "/build",
        filename:"[name].js"
    },
    module:{
        loaders:[
            {
                test: /\.css$/,
                loaders:["style-loader","css-loader"]//添加对样式表的处理 现在的版本一定要加上-loader
                //loader: 'style-loader!css-loader' 这种写法也是兼容的;
            }
        ]
    },
    devServer: {
        port:"9000",//设置默认监听端口，如果省略，默认为”8080“
        hot:true,//热加载
        inline: true,//实时刷新
        historyApiFallback: false,//是否可以回退
    },
    plugins:[
        new htmlWebpackPlugin({
            title:"我是第一个",
            chunks:["build"]
        }),
        new htmlWebpackPlugin({
            title:"我是第二个",
            filename:"index_new",
            chunks:["build_new"]
        })
    ],
    resolve:{
        extensions:[".js",".css","jsx"]  //自动补全识别后缀
    }
}

多个webpack.config.js配置文件

新建一个 webpack.html.config.js或其他的名字的文件内部配置根据上文更改
//在package.json中配置
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start_html":"webpack --config webpack.html.config.js",
    "build": "webpack-dev-server --hot --inline"
  }
//启动对应的webpack
npm run start_html

上述就是一些webpack的基础配置。

秋扬诺布
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
webpack：简单易懂的webpack入门教程
02-06
在 `webpack-master` 压缩包中，你可以找到一个简单的 Webpack 示例项目，它包含了 `webpack.config.js` 配置文件以及相关的源代码。你可以按照以下步骤进行实践： 1. 安装依赖：`npm install`。 2. 运行开发服务器...
webpack4简单入门实例
10-18
Webpack 4 简单入门实例 Webpack 是一个流行的模块打包工具，用于处理现代JavaScript应用程序的构建过程。它能够将各种资源（如JavaScript、CSS、图片等）转换、打包，并生成适合部署到生产环境的静态资源。Webpack...
如何使用webpack
LFP1344709679的博客
12-28 941
什么是Webpack webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 webpack 的使用 - 步骤 步骤： 0.0 初始化项目（生成 package.json 文件） npm init -y 1.0 安装 webpack npm install --save-dev webpack@4.44.2 // 安装 webpack npm in
webPack原理
qq_46222031的博客
07-09 2280
loader分为顺序为从下到上loader本质是一个函数，把要处理的文件作为参数，进行处理之后再返回一个文件最简单的loader loader的定义方式 同步loader this.callback是指调用下一个loader类似链表 调用callback执行下一个loader，此时是异步操作。默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。通过设置 raw 为 true，loader 可以接收原始的 Buffer Pitching Loader
webpack快速入门教程
最新发布
weixin_47948509的博客
05-16 1039
webpack快速入门教程相关
Webpack入门详解
starry-sea1412的弃坑之路
05-19 624
Webpack 是一个现代化的 JavaScript 应用程序的静态模块打包工具。它是一个非常强大的工具，可以将多个模块打包成一个或多个 bundle，从而提高应用程序的性能和加载速度。
webpack零基础入门
jieyucx的博客
06-06 460
Webpack是一个现代的 JavaScript 应用程序静态模块打包器它是一个开源的前端工具，可以将各种资源文件（JS、CSS、图片、字体等）打包成一个或多个包，并且能够通过配置选项来实现各种构建需求。当你的应用程序逐渐变大，代码量变得越来越多，你就需要使用模块来组织代码。然而，模块化使用的代码需要打包成一个或多个文件以便浏览器可以使用。这是 Webpack 出现的初衷，它的主要作用是将各种模块打包成浏览器可以识别的代码。Webpack 还提供了各种插件和加载器，让你可以根据需要灵活配置打包过程。
小白入门（webpack基本使用）
aabbbccc6788123的博客
12-28 659
超级简单的入门教程
webpack简单入门教程
04-26
这个简单的入门教程将引导你了解Webpack的基本概念和配置，让你快速上手。 首先，我们从核心概念开始： 1. **入口(Entry)**：Webpack 开始构建的地方，通常在`webpack.config.js`中定义。在这个例子中，可能`main....
webpack-starter:一个简单的webpack入门
05-15
Webpack入门 用法 克隆此存储库 $ git clone git@github.com:calazans10/webpack-starter.git 将目录更改为应用程序文件夹 $ cd webpack-starter 安装依赖项 $ npm install 运行服务器 $ npm start 使用浏览器，...
webpack入门配置.zip
04-15
本压缩包提供的内容是针对初学者的Webpack入门配置，通过简单步骤即可创建一个基础的Webpack打包项目。 1. **Webpack 基础概念** Webpack 是一个静态模块打包器，它会将JavaScript、CSS、图片等所有应用到项目中的...
webpack通俗指南（一）持续更新中
专注在前端的路上人
04-08 613
webpack通俗指南，真的蛮通俗的 持续更新中
9-4 Webpack（部署到github）
前端知识库
05-13 590
如何使用 webpack 10.一键部署到 github 做了网页目的就是给别人看 步骤 1.本地打包 2.上传到github 10.1 一个文件上传 git add . – git commit -v – yarn build（重新生成dist目录） 理论上来说dist目录中的内容就是一个独立的前端网站 1.在本地用http-server测试一下 2.cd dist – http-server -c-1 3.本地预览没问题就可以上传到github 上传到github 一个小tip：如果代码已经上传过
Webpack（入门级知识点）
wdx1641670284的博客
02-09 371
前端通过代理处理跨域问题，只适用开发环境。所以在项目源代码中，我们需要自行根据开发环境以及接口是否需要代理，来判断该接口请求的服务器地址是否需要换成devServer的地址。处理应用程序时，会递归构建一个依赖关系图，其中包括应用程序需要的每个模块，将所有的模块打包成一个或者多个bundle。'index.html' 默认情况下生成的 html 文件叫 index.html，但有时候你不想叫这个名字，可以改。简单来说 webpack是一个打包工具，把复杂的各种文件通过自身，打包输出成为CSS，JS，图片。
webpack入门教程
Mr_zhang0211的博客
06-20 421
新手学习webpack
webpack 原理分析与性能优化（2w字精华）
qq_34230117的博客
12-25 405
webpack webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。 Webpack 核心概念： Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖...
Webpack原理简单讲解
weixin_33713707的博客
04-27 1051
Webpack原理简单讲解 webpack是JavaScript应用程序的静态模块打包器,webpack处理应用程序时,将递归构建一个依赖关系图,依赖图映射了项目中需要的每一个模块,并打包生成一个或多个bundle. 当在命令行运行指令 webpack 的时候,webpack将默认从当前目录下查找 webpack.config.js 文件 webpack的配置(webpack.config.js)...
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
webpack入门与配置解析
"Learning webpack step by step" 这个资源是一个逐步学习webpack的教程，主要讲解了现代前端开发中使用webpack的重要性和各种功能。Webpack是一个模块打包工具，它解决了在网页中添加多个脚本导致的页面加载速度慢...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值