前端模块化之webpack的初识与使用

2021-02-25 10:18:16 浏览数 (1)

​1 前言

大家好，今天我来和大家一起来了解前端模块化工具webpack的知识，如有疑问和错误，欢迎指正，一起交流探讨哈！

2 webpack的作用

项目源代码之间存在依赖关系，通过webpack打包它的入口文件，就可以完成后续代码的打包，最终形式可以线上部署的代码，这就是webpack的优势所在

3 webpack的优点

  • 代码拆分
  • Loader
  • 智能解析
  • 插件系统
  • 快速运行

4 webpack的实战

  • 安装webpack webpack-cli这两个全局包
代码语言：javascript复制
npm i webpack webpack-cli -g
  • 查看是否安装webpack，webpack-cli是否成功
代码语言：javascript复制
webpack -v
webpack-cli -v
  • 安装成功后就可以对项目代码进行打包
  • 新建一个文件夹存放项目文件，这里我取名为 entry.js
代码语言：javascript复制
document.write("I am quanzhanjiajia")
  • 打开文件所在路径，cmd打开终端,webpack 入口文件名 -o 输出的文件夹名，存放打包后的js文件 --mode=development(开发者模式)或者使用production(生产模式)，两种模式的区别在于会不会被压缩，development模式不会被压缩
代码语言：javascript复制
webpack ./entry.js -o bundle --mode=development
  • 接着新建一个index.html文件，引入打包后的js文件
代码语言：javascript复制
<!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/main.js"></script>
</body>
</html>

运行后可以看到

  • 一个大型的项目文件，每个文件之间都存在相互的依赖关系，我们可以通过把所有需要打包的模块文件引入到入口文件中，这样我们就可以通过打包入口文件，完成项目的打包
代码语言：javascript复制
document.write("I am quanzhanjiajia<br>")
//在入口文件中导入module模块
document.write(require('./module.js'))
  • 再次执行打包命令
代码语言：javascript复制
webpack ./entry.js -o bundle --mode=development

可以看到

  • 我们知道webpack非常强大，除了可以打包js文件，还可以打包其他各种类型的文件
  • 那么来试试打包css文件吧
  • 新建css文件
代码语言：javascript复制
body{
    background-color: red;
}
  • 首先生成一个package.json文件
代码语言：javascript复制
npm init -y
  • 安装style-loader css-loader
代码语言：javascript复制
npm i style-loader css-loader -D

入口文件中导入css模块

代码语言：javascript复制
document.write("I am quanzhanjiajia<br>")
//在入口文件中导入module模块
document.write(require('./module.js'))
//导入css模块
require('!style-loader!css-loader!./site.css')

再次打包

代码语言：javascript复制
webpack ./entry.js -o bundle --mode=development

可以看到页面发生变换，css样式生效

  • 下面介绍另一种打包css文件的方式
  • 修改入口文件导入css文件
代码语言：javascript复制
document.write("I am quanzhanjiajia<br>")
//在入口文件中导入module模块
document.write(require('./module.js'))
//导入css模块
//require('!style-loader!css-loader!./site.css')
//导入css模块的另一种方式
require('./site.css')
  • 新建webpack.config.js配置文件
代码语言：javascript复制
module.exports ={
    mode:'development',
    entry:'./entry.js',
    output:{
      path:__dirname,
      filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]

    }
  }
  • 在终端直接输入webpack
代码语言：javascript复制
webpack
  • 查看效果
  • 查看打包的进度
代码语言：javascript复制
webpack --progress

如果不是默认的webpack.config.js文件，而是叫webpack.config.dev.js,这时，我们可以指定配置文件

代码语言：javascript复制
webpack ./entry.js -o bundle --config webpack.config.dev.js
  • 可以看到同样可以打包成功

5 总结

通过上面，我们大致学习了webpack的基本使用方法，随着webpack技术不断得更新迭代，我们在网上可能会看得很多webpack相关的技术，但是其实有些版本早已过时，学习webpack还是要去官方文档学习，保证技术不落后！

如果觉得我的文章写得不错，欢迎关注，点赞，在看，分享，收藏！爱你么么哒

欢迎各位读者，大佬，和我一起学习交流！

webpack 打包 javascript

0 人点赞