webpack (一) 入门

最新推荐文章于 2024-10-02 15:47:16 发布
最新推荐文章于 2024-10-02 15:47:16 发布
阅读量140 收藏
点赞数
分类专栏： webpack 文章标签： webpack 入门 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44420276/article/details/99238958
版权
webpack

https://www.webpackjs.com/concepts/

webpack 优点：

  • 专注于处理模块化的项目，能做到开箱即用，一步到位；
  • 通过Plugin扩展，完整好用又不失灵活；
  • 使用场景不限于web开发；
  • 社区庞大，大部分开源；
  • 良好的开发体验

webpack缺点：

  • 采用模块化的项目
安装

全局安装（不建议，防止不同的项目版本不一形成冲突）

npm install  webpack -g

本地安装

  • 4.0
npm install webpack webpack-cli --save-dev
  • 安装指定版本
npm install webpack@<version> --save-dev

基本使用

npm init -y

npm install webpack webpack-cli --save-dev

新建webpack.config.js
在这里插入图片描述

之后新建
index.html main.js show.js
在这里插入图片描述
webpack.config.js

const path = require('path')
module.exports = {
    entry:'./main.js', //入口文件
    output:{
        filename:'bundle.js', //出口文件名
        path:path.resolve(__dirname,"./dist"), //地址绝对
    }   
}

index,html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="./dist/bundle.js"></script> //之后编译的文件
</body>
</html>

show.js

function show(context){
    document.getElementById("app").innerText = "hello " + context;
}

module.exports = show;

main.js

const show = require('./show.js')

show('webpack')

编译

webpack --config ./webpack.config.js

会出现dist文件夹
在这里插入图片描述
打开index.html

hello webpack 了解一下

loader

webpack 可以编译js 但其他要依赖 对应的loader编译

现在在当前项目位置：添加一个main.css文件
在这里插入图片描述
main.js

require('./main.css')

const show = require('./show.js')

show('webpack')

直接编译

webpack --config ./webpack.config.js

报错，对应css文件有自己的loader机制
在这里插入图片描述
webpack.config.js

const path = require('path')
module.exports = {
    entry:'./main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,"./dist"),
    },
    module:{
        rules:[
            {
                test:/\.css$/, // \转义 $结尾
                use:['style-loader','css-loader‘]  //style-loader 将css注入js  css-loader  读取css  // 执行顺序 从后到前
            }
        ]
    }   
}

编译
在这里插入图片描述
缺少style-loader css-loader Loader Loader机制

npm i -D  style-loader css-loader

再编译
在这里插入图片描述

未指定开发，生产模式

const path = require('path')
module.exports = {
    mode:'none', // 指定
    entry:'./main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,"./dist"),
    },
	... 
}

编译
在这里插入图片描述

在这里插入图片描述

现在时css加载到js,也可以抽离单独css文件

Plugin

扩展webpack功能 比如接着上面，我们把css单独抽离文件中

安装插件

npm i -D extract-text-webpack-plugin

或者

npm install extract-text-webpack-plugin@next

webpack.config.js

const path = require('path')
const ExtracTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
    mode:'none',
    entry:'./main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,"./dist"),
    },
    module:{
        rules:[
            {
                test:/\.css$/, // \转义 $结尾
                loaders:ExtracTextPlugin.extract({
                    use:['css-loader'],
                })
            }
        ]
    },
    plugins:[
        new ExtracTextPlugin({
            filename:`[name].css`,
        })
    ]  
}

在这里插入图片描述

DevServe
  • 实际开发中，我们需要在服务器中打开，而不是本地
  • 监听文件变化，可以实时预览
npm i -D webpack-dev-server

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open"
  },

webpack.config.js

    output:{}
+   devServer: {
+     contentBase: './dist'
+   },

开发环境 开启服务起始位置 /dist 注意index.html文件
在这里插入图片描述
在这里插入图片描述

npm run start

实时预览 webpack --watch

模块热替换 webpack --hot

Posden
关注
专栏目录
初识 Webpack (四) 解析stylus文件，将css内容单独分离（loader和plugs配置）
Sicily_winner的博客
01-27 1517
目录 ✦ 前言 ✦ 文章 ➬ 文档 ➬ 遇到的问题 ➬ 配置和实战 ✦本章节学习内容 ✔ 基本代码和目录结构 ➊模块安装 ➋ 添加html-webpack-plugin打包 ➌添加extract-text-webpack-plugin打包 ✦ 整体代码 ✦ 总结 ✦ 前言 普通webpack的打包css被打包到了js文件中，以字符串的形式存在，并且整...
Webpack 快速入门指南（一）
彳亍
08-27 511
简介 webpack 是一个前端资源加载/打包工具。 webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 可以将多种静态资源（js、css、...
mini-css-extract-plugin插件快速入门
weixin_34159110的博客
04-19 2744
前言 webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。extract-text-webpack-plugin插件的优缺点： 更多介绍请看移步：webpack.docschina.org/plugins/ext… webpack 4.0以后，官方推荐使用extract-text-webpack-p...
用一个hello world项目学习webpack
imjianjian
02-10 390
更多内容欢迎来到博客 ：https://imjianjian.github.io 项目准备 项目地址 项目结构 - src - app - App.vue - img - logo.png - style - app.scss - index.html - main.js webpack基...
webpack配置ExtractTextPlugin
sunzhen15896的博客
05-06 4628
1.ExtractTextPlugin是什么？ ExtractTextPlugin是webpack用于将css,less打包成一个公共的文件的插件，在react写大量的less文件时，打包所有的less文件到一个公共文件能够很好的优化项目结构 2.如何使用ExtractTextPlugin？ （1）npm install extract-text-webpack-plugin@2.1.2 --sa...
Webpack 从入门到精通
来自想要赚大钱的小周同学
07-28 5061
学习目标：webpack从入门到精通
webpack简单入门教程
04-26
Webpack 是一个现代JavaScript应用程序的模块打包工具，它将应用程序的所有依赖关系进行静态分析，并将其打包成一个或多个浏览器可理解的文件。这个简单的入门教程将引导你了解Webpack的基本概念和配置，让你快速...
webpack入门教程
11-10
### webpack入门教程 #### 一、什么是webpack？ webpack 是现代 JavaScript 应用程序的一个模块打包器。它将多个模块和资源文件打包成一个或多个 bundle 文件，这些文件可以在浏览器环境中运行。通过 webpack，...
Webpack：Webpack配置入门.docx
08-28
Webpack：Webpack配置入门.docx
使用ExtractTextPlugin将css和js分开打包
马优晨
09-06 880
第一步： 首先你要有对应的样式环境 首先需要安装 npm install stylus-loader css-loader style-loader --save-dev 接下来 （1）使用less npm install less less-loader --save-dev （2）使用scss npm install sass sass-loader --save-dev （3)安装Ex...
【webpack】中mini-css-extract-plugin使用方法
weixin_30325071的博客
03-22 941
这个参加可以压缩CSS，然后让CSS输出到指定的目录中 使用这个loader也很简单，只有将style-loader 替换成MiniCssExtractPlugin.loader, 'css-loader const MiniCssExtractPlugin = require('mini-css-extract-plugin'); { te...
webpack学习笔记-5-extract-text-webpack-plugin
热门推荐
qq_38652603的博客
06-28 1万+
介绍了extract-text-webpack-plugin插件的使用
Webpack 特性探讨：CDN、分包、Tree Shaking 与热更新
前端探索者
09-29 1250
Webpack 作为现代前端开发中的核心构建工具，提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新（HMR）等关键特性。我们将使用前一篇文章中的代码，然后我们引入一些图片、css 等资源文件已经一些常用的第三方库，如lodash。
个人文章合集 - 前端相关
王小二(海阔天空)
09-29 442
前端：简述表单提交前如何进行数据验证 前端：项目一个html中如何引入另一个html？ 前端：一张图快速记忆CSS所有属性 前端：三个CSS预处理器(框架)-Sass、LESS 和 Stylus的比较Jquery：验证InputFile选中的文件类型Vue：简述对Vue的简单认识 Vue：Vue2.0常用的开发环境 Vue：Windows环境下搭建Vue的开发环境 Vue：优秀的Vue UI组件库总结 Vue：简述Vue开发中的NaN类型 Vue：父子组件之间的接口互调 Vue：SessionStorage
学习Webpack中图片-JS-Vue-plugin
qq_45730399的博客
09-30 1366
打包图片、js、vue，学习webpack插件
js逆向——webpack实战案例(一)
Tandy12356_的博客
09-28 978
首先通过跟栈的方法找到加密位置我们跟进u函数，发现是通过webpack加载的向上寻找u的加载位置，然后打上断点，刷新网页，让程序断在加载函数的位置u = r.n(a)
Webpack模式-Resolve-本地服务器
最新发布
qq_45730399的博客
10-02 1031
Resolve解析、模式、搭建本地服务器
webpack loader入门与实践
总结，webpack的loader机制是其强大的原因之一，它使得开发者可以灵活地处理各种类型的文件，构建复杂的应用。正确配置和使用loader，能够极大地提升开发效率和项目的可维护性。在实际项目中，开发者可以根据需求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值