webpack的基本使用

最新推荐文章于 2024-07-26 15:22:42 发布

今天星期几呢

最新推荐文章于 2024-07-26 15:22:42 发布

阅读量137

点赞数 2

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/shhghvvh/article/details/128528721

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.初始化隔行变色的案例

1.1安装webpack

1.2配置webpack

项目根目录中创建名为webpack.config.js的文件，初始化如下配置

在package.json的scripts的节点下，新增dev脚本

在终端中运行npm run dev命令，启动webpack进行项目的打包构建

效果实现

全部代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./index.js"></script> -->
    <script src="../dist/main.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>
    </ul>
</body>
</html>

index.js

//1.使用ES6模块化方法导入jQuery
import $ from 'jquery'
//2.定义jQuery的入口函数
$(function(){
    //3.实现奇偶行变色 奇数行红色，偶数行绿色
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','green')
})

2.mode可选值的应用场景

development 打包耗时短项目开发时使用

production 打包耗时长项目上线时使用

项目上线压缩前后文件大小对比

3. 自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口示例代码如下:

//导入node.js中专门操作路径的模块
const path = require('path')
//使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {

    //打包入口文件的路径
    entry:path.join(__dirname,'./src/index.js'),
    //输出文件的存放路径
    output:{
        path:path.join(__dirname,'./dist'),
        //输出文件的名称
        filename:'main.js'
    }
    
}

4.webpack中的插件使用

4.1webpack-dev-server

类似于node.js阶段用到的nodemon工具
每当修改了源代码，webpack 会自动进行项目的打包和构建

安装

npm i webpack-dev-server

通过/根目录进行访问

更改后的文件在内存里

4.2html-webpack-plugin

webpack中的 HTML插件（类似于一个模板引擎插件)

可以通过此插件自定制index.html页面的内容

//导入node.js中专门操作路径的模块
const path = require('path')

//.1导入html-webpack-plugin这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2.new构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',
    filename:'./index.html'
})

//使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    mode: 'development',// 设置mode   development为开发环境，production为生产环境
    //打包入口文件的路径
    entry:path.join(__dirname,'./src/index.js'),
    //输出文件的存放路径
    output:{
        path:path.join(__dirname,'./dist'),
        //输出文件的名称
        filename:'main.js'
    },
    plugins:[htmlPlugin]
    
}

4.3devServer中常用的属性

//导入node.js中专门操作路径的模块
const path = require('path')

//.1导入html-webpack-plugin这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2.new构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',
    filename:'./index.html'
})

//使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    mode: 'development',// 设置mode   development为开发环境，production为生产环境
    //打包入口文件的路径
    entry:path.join(__dirname,'./src/index.js'),
    //输出文件的存放路径
    output:{
        path:path.join(__dirname,'./dist'),
        //输出文件的名称
        filename:'main.js'
    },
    plugins:[htmlPlugin],//插件的数组，将来 webpack在运行时，会加载并调用这些插件
    devServer:{
        open:true,//初次打包完成后自动打开浏览器
        host:'127.0.0.1',//实时打包所使用的主机地址
        port:80,//是是打包所使用的端口号
    }
    
}

5.webpack中的loader

5.1打包处理css文件

1.webpack 默认只能打包处理.js结尾的文件，处理不了其它后缀的文件
⒉由于代码中包含了index.css这个文件，因此 webpack默认处理不了
3.当webpack'发现某个文件处理不了的时候，会查找webpack.config.js 这个配置文件，看module.rules数组中，是否配置了对应的loader 加载器。

4.webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader
5.当css-loader处理完毕之后，会把处理的结果，转交给下一个loader(转交给style-loader)
6.当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给了webpack
7.webpack把 style-loader处理的结果，合并到 /dist/main.js中，最终生成打包好的文件。

//1.使用ES6模块化方法导入jQuery
import $ from 'jquery'

//导入样式(在 webpack中,一切皆模块，都可以通过 ES6导入语法进行导入和使用)
import './css/index.css'

//2.定义jQuery的入口函数
$(function(){
    //3.实现奇偶行变色 奇数行红色，偶数行绿色
    $('li:odd').css('background-color','pink')
    $('li:even').css('background-color','red')
})

module.exports = {
module:{
        rules:[//所有第三方文件模块的匹配规则
        //test表示匹配的文件类型，use 表示对应要调用的loader
        {test:/\.css/,use:['style-loader','css-loader']}
    ]
    }
}

5.2打包处理less文件

1.运行 npm i less-loader@10.0.1 less@4.1.1 -D

2.在webpack.config.js的module -> rules数组中，添加loader规则如下:

module:{
        rules:[//所有第三方文件模块的匹配规则
        //test表示匹配的文件类型，use 表示对应要调用的loader
 
        //处理less文件的loader
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
    }

今天星期几呢

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
webpack的基本使用

在webpack.config.js配置文件中，通过entry节点指定打包的入口。//导入node.js中专门操作路径的模块//使用node.js中的导出语法，向外导出一个webpack的配置对象//打包入口文件的路径//输出文件的存放路径output:{//输出文件的名称}}
复制链接

扫一扫

专栏目录