webpack一步步实现实时打包、打包vue、打包css\less\scss文件、babel用法(1)

最新推荐文章于 2023-06-17 11:38:24 发布
最新推荐文章于 2023-06-17 11:38:24 发布
阅读量3.2k 收藏 3
点赞数 1
分类专栏： Js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013210620/article/details/83069379
版权

文章目录

安装webpack

什么是webpack?
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
学习官网：https://www.webpackjs.com/

打包方案
1.使用Gulp， 是基于 task 任务的；
2.使用Webpack， 是基于整个项目进行构建的；
借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

webpack安装的两种方式
1.运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2.在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
3.安装npm i webpack-cli -g
这里提示安装 webpack-cli// 是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli

构建项目进行webpack打包

我们先看下小demo的目录结构
在这里插入图片描述

初步使用webpack打包构建列表隔行变色案例
1.创建项目基本的目录结构
2.运行npm init -y初始化项目，使用npm管理项目中的依赖包
3.使用npm i jquery --save安装jquery类库，会生成node_modules包

npm install moduleName # 安装模块到项目目录下

npm install -g moduleName # -g 
的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。

npm install -save moduleName # -save 
的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

npm install -save-dev moduleName # -save-dev 
的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

4.创建index.js并书写各行变色的代码逻辑：

import $ from 'jquery'
$(function () {
    $('li:odd').css('backgroundColor', 'red')
    $('li:even').css('backgroundColor', function () {
      return '#' + 'D97634'
    })
  })

5.编写自动打包配置文件webpack.config.js

const path = require('path')

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

6.编写前端代码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>

    <script src="../dist/index.js"></script>
    <!-- <script src="/index.js"></script> -->
</head>
<body>
   <ul>
       <li>这是第1个li</li>
       <li>这是第2个li</li>
       <li>这是第3个li</li>
       <li>这是第4个li</li>
       <li>这是第5个li</li>
       <li>这是第6个li</li>
       <li>这是第7个li</li>
       <li>这是第8个li</li>
       <li>这是第9个li</li>
       <li>这是第10个li</li>
   </ul>
</body>
</html>

7.然后输出repack指令，去生成./dist/index.js编译后的文件

zhiliaodeMBP:webpack_study zhiliao$ webpack
Hash: 83e0feae3cae4dfed0fe
Version: webpack 4.20.2
Time: 288ms
Built at: 2018/10/16 下午2:28:52
   Asset     Size  Chunks             Chunk Names
index.js  305 KiB    main  [emitted]  main
Entrypoint main = index.js
[./src/index.js] 186 bytes {main} [built]
    + 1 hidden module
zhiliaodeMBP:webpack_study zhiliao$

8.测试效果如下：
在这里插入图片描述

// 当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
// 2. webpack 就会去 项目的 根目录中，查找一个叫做 webpack.config.js 的配置文件
// 3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
// 4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；

使用webpack的实时打包构建

以上我们每次修改代码之后，需要webpack重新生成编译后的文件，那么我们能不能实现直接实时打包，当我们直接保存就可以自动打包编译，然后效果立现呢？是可以的，我们需要进行如下的操作：

1.使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包编译

2.运行npm i webpack-dev-server --save-dev安装到开发依赖，或者npm i webpack-dev-server -D

-S就是--save的简写
-D就是--save-dev

3.安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错,此时需要借助于package.json文件中的指令,在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，

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

4.此时我们执行npm run dev，发现报如下的错误信息：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ℹ ｢wdm｣: Compiled with warnings

因为在webpack4中需要我们进行mode配置操作,我们修改webpack.config.js文件
添加一行键值对mode: 'development'或者mode: 'production'，

const path = require('path')
module.exports={
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'index.js'
    },
    // mode: 'production',
    mode: 'development',
}

然后在进行编译，就编译成功，如下是成功的日志输出，我只是贴出了一部分

Entrypoint main = index.js
[24] (webpack)/hot/emitter.js 77 bytes {0} [built]
[25] ./node_modules/events/events.js 8.13 KiB {0} [built]
[26] ./src/index.js 185 bytes {0} [built]
    + 12 hidden modules
ℹ ｢wdm｣: Compiled successfully.

5.接下来我们进行测试如下：
我们修改下index.js的文件内容，我们由之前的red修改为如下的yellow

$('li:odd').css('backgroundColor', 'yellow')

就会发现命令行会自动编译，然后编译成功！！！
在这里插入图片描述

我们刷新浏览器发现，并没有变化，奇怪？哪里搞错了？
其实我们在进行npm run dev时候，dist目录下并没有生成index.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中，放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，

此时引用不到bundle.js文件，需要修改index.html中script的src属性为:
<script src="/index.js"></script>

因为浏览器输出http://localhost:8080/index.js会看到内存中的index.js文件
在这里插入图片描述

然后在重新npm run dev，然后在实时更新内容，浏览器就可以实时展现效果了

6.为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3100 --contentBase src --hot"
  }

以上配置意思就是执行npm run dev,会自动打开浏览器，然后端口是3100，直接定位到src,而且使用热更新

其实我们还可以进行配置操作，以下是配置到内内容，为了区分哪些是需要添加到内容，我特定将其注释了，注释的部分就是在代码中进行的配置

const path = require('path')
//启用热更新
// const webpack = require('webpack')

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

    // devServer:{
    //     open:true,
    //     port:3100,
    //     contentBase:'src',
    //     hot:true
    // },
    // plugins:[
    //     new webpack.HotModuleReplacementPlugin()//new一个热更新

    // ]
}

7.使用html-webpack-plugin插件配置启动页面
运行npm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：
添加如下：

var htmlWebpackPlugin = require('html-webpack-plugin');
 plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        }),
],

然后测试，效果可以通过，我们来看下浏览器渲染的index.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>

    <!-- <script src="../dist/index.js"></script> -->
    <script src="/index.js"></script>
</head>
<body>
   <ul>
       <li>这是第1个li</li>
       <li>这是第2个li</li>
       <li>这是第3个li</li>
       <li>这是第4个li</li>
       <li>这是第5个li</li>
       <li>这是第6个li</li>
       <li>这是第7个li</li>
       <li>这是第8个li</li>
       <li>这是第9个li</li>
       <li>这是第10个li</li>
   </ul>
<script type="text/javascript" src="index.js"></script></body>
</html>

我们看到多生成了一个<script type="text/javascript" src="index.js"></script>标签

将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把index.js注入到index.html页面中
所以说我们在webpack.config.js中可以将entry和output均去掉，具体代码看如下

打包css\less\scss

打包css
1.运行npm i style-loader css-loader --save-dev
2.修改webpack.config.js这个配置文件

打包less

  1. 需要npm i less -D安装less,是less-loader 内部依赖
    1.运行cnpm i less-loader less -D
    2.修改webpack.config.js这个配置文件：

打包scss
1.需要npm i node-sass -D安装node-sass
2.运行cnpm i sass-loader node-sass --save-dev
3.在webpack.config.js中添加处理sass文件的loader模块：

在webpack.config.js中添加如下内容：

 //这个节点用于配置所有的第三方模块加载器
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},

            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},

            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
        ]
    }

use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的

然后我们在css目录中，添加3个样式文件
index.css

li{
    list-style: none;
  }

index.less

ul{
    padding: 0;
    margin: 0;
}

index.scss

html,body{
    margin: 0;
    padding: 0;

    li{
        font-size: 12px;
        line-height: 30px;
    }
}

然后进行 npm run dev查看效果：
在这里插入图片描述

项目代码

其中css文件中的index.css、 index.less、 index.scss文件省略，上面已经写出
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>
   <ul>
       <li>这是第1个li</li>
       <li>这是第2个li</li>
       <li>这是第3个li</li>
       <li>这是第4个li</li>
       <li>这是第5个li</li>
       <li>这是第6个li</li>
       <li>这是第7个li</li>
       <li>这是第8个li</li>
       <li>这是第9个li</li>
       <li>这是第10个li</li>
   </ul>
</body>
</html>

index.js

import $ from 'jquery'
import './css/index.css'
import './css/index.less'

import './css/index.scss'
$(function () {
    $('li:odd').css('backgroundColor', 'pink')
    $('li:even').css('backgroundColor', function () {
      return '#' + 'D97634'
    })
  })

webpack.config.js

const path = require('path')
//启用热更新
const webpack = require('webpack')
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    // entry:path.join(__dirname,'./src/index.js'),
    // output:{
    //     path:path.join(__dirname,'./dist'),
    //     filename:'index.js'
    // },
    mode: 'production',
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        }),
        new webpack.HotModuleReplacementPlugin()//new一个热更新
    ],
    devServer:{
        open:true,
        port:3100,
        contentBase:'src',
        hot:true
    },
    //这个节点用于配置所有的第三方模块加载器
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},

            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},

            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
        ]
    }
    
}
易辰_
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-boilerplate：带Babel，SASS，PostCSS，Vue，Tailwind和Pug的Webpack 4模板
01-30
使用和编写现代CSS 用和编写现代JS 预配置的 ，可快速构建定制设计 自动将模板和静态资产从src复制到dist文件夹 Linter脚本 使用webpack-dev-server热加载 生成转译，捆绑，自动前缀，缩小和压缩的文件以进行...
你把 vite打包 玩明白
技术前端，忠于热爱 @0.活在风浪里
08-02 1万+
webpack 打包看这里（移动端打包）一步一步,一步 从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包成app一步一步,一步 从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目)手写一个服务器代码将 《vue电商后台管理系统》部署上去 上线、打包_0.活在风浪里的博客-CSDN博客亲测可用，一定会收获颇多，1.上线vue电商后台管理项目2.手写搭建服务器并挂载 （node）3.打包优化 完成上线。.............
vite中引入预处理全局scss文件
哦哦一人
03-08 1万+
vite中引入预处理全局scss文件 cssPreprocessOptions: { scss: { additionalData: '@import "./src/assets/scss/all.scss";' // 添加公共样式 } } 复制此段代码至vite.config.js中 引入路径看具体需求改动
一、Vite css处理（模块module、sass less预处理、获取CSS代码字符串）
黄彪博客
06-17 3734
如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: ‘camelCaseOnly’），你还可以使用按名导入。
【 如何将.vue文件中的所有css代码放入一个.css文件中】
u012632105的博客
02-11 513
javascript – 如何将.vue文件中的所有css代码放入一个.css文件中？
在Vite中配置scss并使用
Th_rob的博客
07-04 1万+
本文章主要讲述自己在使用Vite的过程对scss的配置与使用。
Vue+Vite 项目打包 .d.ts 以及css打包成行内
仰望星空的博客
03-28 703
打包.d.ts 插件NPM地址。打包为行内样式NPM地址。
vite打包拆分js和css
weixin_48309048的博客
02-28 5134
vite打包拆分js和css
Toxin-Hotel-Are-Vue-WebPack-Front-end:从HTML，SCSS，JS TO Vue + Webpack与Pug，Scss，Babel迁移代码
03-30
Toxin-Hotel-Are-Vue-WebPack-Front-end:从HTML，SCSS，JS TO Vue + Webpack与Pug，Scss，Babel迁移代码
Vuejs 单文件组件实例详解
11-29
在之前的实例中，我们都是通过 Vue.component 或者 components 属性的方式来定义组件，这种方式在很多中小规模的项目中还好，但在复杂的项目中，下面这些缺点就非常明显了： 字符串模板：缺乏高亮，书写麻烦，特别...
Webpack-Vue-HMR-App-Demo:使用webpack + vue + HMR + SCSS + PHP的演示
04-30
Webpack Vue HMR现有的应用程序演示该项目以易于集成到现有项目中的方式，作为结合使用以下技术的演示： 带Babel的Webpack Vue（具有.vue组件文件支持） Vue热模块重装具有自动前缀的SCSS / SASS（默认为引导程序）...
bottle-vue-kickstart::pizza:带有Vue.js和Webpack的非常基本的Bottle Kickstart套件。 包括Axios，Autoprefixer，Babel，Webpack配置，带有Bulma的演示应用程序和Web字体加载器
05-11
Vue.js 2.6+ （React式Web应用程序的基础） 带有配置的Webpack 3+ （SCSS，ES6，Vue.js） 网络字体加载器1.6+ （来自Google字体的异步加载字体） CSS，样式： latest什么瓶子？ 是用于Python的轻量级WSGI微型网络...
实现一个vue按需打包的css或scss或less的Vite插件--可自动按需打包vue文件中的style标签下已使用的样式
D_Q_L的博客
01-05 1786
一个支持vue的css样式引入文件(包括css和scss和less文件)按需打包vite插件
vite自定义环境打包启动服务
weixin_42967392的博客
07-05 1312
vite根据环境打包
在Vite中配置SCSS全局变量及可能的坑
有事儿私信。
03-17 3334
在项目中我们经常会使用css变量来提高开发效率，其中使用scss变量方法如本文所示。
vite中静态资源（css、img、svg等）的加载机制及其相关配置
weixin_46769087的博客
12-05 7882
vite对静态资源文件的处理
vite+react+ts+sass搭建项目
weixin_57337549的博客
03-05 7143
vite+React+ts+sass重0开始搭建项目
LaTeX公式-Katex解析
热门推荐
全干工程师
08-22 2万+
概念 在线测试工具 latex公式 katex前端展示latex数学公式效果 概念 以下来自百度百科： LaTeX是一种基于ΤΕΧ的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在20世纪80年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由TeX所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品...
vite scss 单独打包
最新发布
09-02
在Vite中，可以通过一些简单的配置来单独打包SCSS文件。 首先，在项目的根目录下创建一个新的文件夹，例如"styles"，并在该文件夹下创建一个名为"main.scss"的文件。 在main.scss文件中，可以写入所有的项目所需的SCSS代码。例如： ```scss $primary-color: #ff0000; body { background-color: $primary-color; } ``` 接下来，在项目的入口文件（通常是"main.js"或"main.ts"）中引入该main.scss文件。例如，在main.js中添加以下代码： ```javascript import './styles/main.scss'; // 其他的Vue/Vue3或React初始化代码... ``` 此时，Vite会自动感知到引入的SCSS文件，并将其单独打包。 最后，运行Vite开发服务器时，会将SCSS代码编译为CSS并单独输出到一个文件中。 以上就是使用Vite在项目中单独打包SCSS文件的简单配置过程。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值