webpack学习

longlongago~~

已于 2022-07-29 11:25:38 修改

阅读量670

点赞数

文章标签： webpack 学习 javascript

于 2022-07-29 11:14:09 首次发布

本文链接：https://blog.csdn.net/weixin_44434938/article/details/126034354

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、webpack是什么？
二、使用步骤
总结

前言

学习–webpack

一、webpack是什么？

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

二、使用步骤

1.安装webpack

1、查看webpack

webpack --version

在这里插入图片描述
2、安装webpack

npm install webpack -g

在这里插入图片描述
3、再次查看webpack --version 提示安装webpack-cli 这里不能选yes 下面是解释为什么不能选yes

**注意：选择yes安装后查看webpack --version 仍提示安装webpack-cli 因为这个是安装到当前项目实际上需要全局安装webpack-cli
在这里插入图片描述
所以要全局安装webpack-cli

npm install webpack-cli -g
webpack --version

在这里插入图片描述

查看webpack --version 出现webpack和webpack-cli的版本号就可以了

2.js打包

1、初始化

npm init

2、新建index.js

document.write('my webpack demo!!!');

3、新建index.html，引入index.js

<!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="./index.js"></script>
</body>
</html>

效果如下：
在这里插入图片描述
4、webpack 打包index.js

wenpack ./index.js

默认生成dist文件夹和main.js
在这里插入图片描述
5、把index.html里的js引入路径改成dist/main.js

<!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="./dist/main.js"></script>
</body>
</html>

展示效果是一样的
在这里插入图片描述
但是这里打包出来的js文件和源文件一样，那打包的意义是什么呢？别急，我们来修改下js文件
6、新建test.js

document.write("test.js!!!");

7、修改index.js

require('./test.js');

8、再次打包webpack ./index.js

webpack ./index.js

在这里插入图片描述
这次打包出来的东西就不一样了，那这样打包出来的东西没有可读性，能不能打包出有结构的js

9、加个mode=development

webpack ./index.js --mode development

在这里插入图片描述
默认mode是production的模式

webpack ./index.js --mode production

在这里插入图片描述
效果与webpack index.js相同

3.打包css

webpack是怎么打包css的？
1、新建style.css

body{
    background: #f00;
    color: #fff;
}

在这里插入图片描述
但是这会爆出一个错误，You may need an appropriate loader to handle this file type，需要一个解析器解析css文件，所以要安装css解析
2、安装css解析

npm install style-loader css-loader --save-dev

在这里插入图片描述
3、直接打包还会报错

4、require css文件的时候，加入解析器
index.js

require('!style-loader!css-loader!./style.css');
require('./test.js');

在这里插入图片描述

4.配置文件

1、写配置文件
webpack.config.js

const path = require('path');
module.exports = {
    entry:'./index.js',
    output:{
        filename:'build.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

2、packjson.json scripts添加自定义npm run 自定义名为webpack的命令

"scripts": {
    "webpack":"webpack"
  },

3、index.html 引入新生成的build.js

<!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="./dist/build.js"></script>
</body>
</html>

4、style.css 换成蓝色背景，易于区分

body{
    background: #00f;
    color: #fff;
}

5、执行新的打包命令

npm run webpack

在这里插入图片描述

6、因为配置文件里用了css文件的解析所以引入的时候不加解析器也是可以的了
1）index.js

import './style.css'
require('./test.js');

或者

require('./style.css');
require('./test.js');

都可以
2）style.css

body{
    background: #000;
    color: #fff;
}

在这里插入图片描述
7、配置加mode=development 打包可读文件
packjson.json webpack命令后面加mode --develpment

"scripts": {
    "webpack":"webpack --mode development"
  },

在这里插入图片描述

官方文档：https://webpack.docschina.org/concepts/

总结

踩坑路漫漫长@~@

longlongago~~

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫