webpack详解

最新推荐文章于 2022-08-04 23:49:45 发布

Zero摄氏度

最新推荐文章于 2022-08-04 23:49:45 发布

阅读量223

点赞数

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

本文链接：https://blog.csdn.net/m0_56116754/article/details/125821175

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Webpack详解

一、webpack概述和安装

Webpack是一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
如：Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少页面的强求
安装webpack

在cmd窗口中输入命令行

npm install -g webpack webpack-cli

检验是否安装成功

webpack -v

二、webpack使用

1、webpack合并js

创建一个nodejs项目 npm init -y
创建一个src目录
在src存放两个需要合并的util.js 和common.js

common.js

//输出
exports.info = function(str){
    //往控制台输出
    console.log(str);
    //往浏览器输出
    document.write(str);
}

util.js

//相加函数
exports.add=(a,b)=>a+b;

在src中创建main.js，其实就是模块集中进行引入

const util=require("./util");
const common=require("./common");
common.info("hello world,"+util.add(100,100));

在根目录下定义一个webpack.config.js文件配置打包的规则

//导入path模块 ndoejs内置模块
const path = require("path");
//定义js打包规则
module.exports={
    //入口函数从哪里开始进行编译打包
    entry:"./src/main.js",
    //编译成功以后把内容输出到哪里去
    output:{
        //定义输出的指定的目录__dirname 在当前项目根目录，产生一个dist文件
        path:path.resolve(__dirname,"./dist"),
        //生成最终的合并的js文件存储在dist/bundle.js
        filename:"bundle.js"
    }
}

执行webpack查看效果(注意先调到cmd中，在运行)

webpack

会自动创建一个dist文件夹，合并后的储存在文件bundle.js中
写一个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>
</head>
<body>
    <script src="bundle.js">

    </script>
    
</body>
</html>

ps:按！加tab键不能一键生成html模板，解决方法：

ctrl+shift+p打开搜索框，输入 change language mode ，找到html，选择
如果上面那样还不行，多半是因为下载的vscode版本过高导致，只需要输入 html：5 ，即可自动补全html模板

2、webpack合并css

webpack本身只能处理javascript模块，如果要处理其他类型的文件，就需要使用loader进行转换

安装style-loader 和css-loader
css-loader是将css装载到javascript；style-loader是让javascript认识css
npm install --save-dev style-loader css-loader

在src文件夹中加入css样式的例子style.css

body{
    background-color: yellow;
}

在main.js中引入

//导入css
require("./style.css");

添加打包css规则在webpack.config.js中

 module:{
        rules:[{
            test:/\.css$/, //把项目中所有的.css结尾的文件进行打包
            use:["style-loader","css-loader"]
        }]
    }
}

运行 webpack
在dist中，打开页面，会发现变黄色啦！

Zero摄氏度

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack详解

Webpack是一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源如Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少页面的强求安装webpackwebpack-v。...
复制链接

扫一扫