webpack工具包

Joker_Z
362 阅读4分钟

webpack的基本介绍

官方概念：是一个现代JavaScript应用程序的静态模块打包器
静态：文件资源
模块：node环境，引入文件，遵循模块化语法
除了合并代码，还能翻译和压缩代码
作用：

  • 静态模块打包器
  • 翻译和压缩代码
  • 减小代码包体积，让浏览器更快速的打开网页

学习webpack的准备工作

  1. 安装一个node
  2. npm init 初始化这个项目，生成package.json文件
  3. 安装并使用webpack

安装并使用webpack

注意：

  • webpack是一个工具，对于所有的项目都可以来使用
  • 不同的项目使用了不同的webpack版本，所以不推荐全局安装，打开老项目的时候，一定要注意版本号
  • 采用局部安装，只是开发依赖，并不是生产依赖 ，在命令行加上-D
  • 命令如下 npm i webpack webpack-cli -D
  • 检测是否安装成功
    npx webpack -v

修改用模块化的方式来改写代码

在tool.js导出模块

const updateDom = (id, content) => {
    window.document.getElementById(id).innerHTML = content
}
//导出
module.exports = {
    updateDom
}

在index.js中导入模块

//导入  
const { updateDom } = require('./tool.js')
updateDom('app', 'index.html')

由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错

使用webpack来做打包

命令如下
npx webpack 文件名
如果没有错误，会生成一个dist的文件夹，里面有一个main.js的文件，说明打包已经操作成功

image.png

引入打包后的js

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>

<body>
    <div id="app">

    </div>
    <!-- 引入打包后的js文件 -->
    <script src="./dist/main.js"></script>


</body>

</html>

image.png

为什么要用webpack

  1. 有效的处理模块化
  2. 把多个相互引用的.js文件打包成一个文件，能够压缩和加密文件，使文件上线更安全
  3. 在这个过程中nodejs的作用，它是webpack运行的基础，最终生成的main.js文件还是在浏览器中运行的

webpack的配置文件

创建并使用默认配置文件

  • 在项目的根目录下，创建一个webpack.config.js的文件
    内容如下：
module.exports = {
  mode: 'development', // 打包方式
}

作用：导出一个配置项，用来对webpack的打包行为做设置

了解入口和出口

入口文件：指定了webpack从哪个文件开始工作，在它的内部会引入其他的模块
出口文件：指定了最后打包之后的文件
在webpack中的默认出口和入口是：

  • 默认入口：./src/index.js
  • 默认出口：./dist/main.js
    如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下 直接省略入口文件，直接打包npx webpack

设置入口文件

  • 在src目录下，新建一个js文件夹，把index.js改成main.js，并把tool.js放在里面
  • 修改配置项，添加entry项
    entry: './src/js/main.js'

设置出口文件

  • 修改配置项，添加output项
  • 把出口文件设置为在build目录下的bundle.js
    1、引入nodejs中的path模块
    2、在output项中，设置出口文件的绝对路径和文件名称
    output: {
        //设置路径
        path: path.join(__dirname, '/build'),
        // 设置名称（默认情况下叫main.js）
        filename: 'bundle.js'
    }

修改打包的模式

mode项用来设置打包的方式，如果不设置默认为production
development:开发模式（代码不会混淆，压缩）
production：生产模式（压缩、混淆、加密 不可读）

在打包的时候指定配置文件

自己创建一个webpack.dev.js的文件，用来做配置文件
内容如下：

module.exports = {
  output:{
    filename:'boundle.js'
  }
}

我们希望使用我们配置的文件来设置打包
格式如下： npx webpack --config webpack的配置文件

简化打包命令

定制script
在package.json中添加script命令来快速启动webpack

image.png 在script中不需要再添加npx,它会自动在node_modules/.bin中去找命令
这样我们就得到了两个命令，dev和build
可以在小黑窗中运行： npm run build,npm run dev来运行

小结

  • webpack的配置文件默认名是webpack.config.js，也可以单独指定
  • 学习webpack就学习webpack.config.js的使用。
  • 把webpack的命令集成到script中可以简化打包命令。
  • 可以自行定义入口和出口文件

loader

在webpack看来，一切皆模块

loader处理css文件

  1. 在js中导入css文件
  2. 安装一个css-loader包,在配置文件中配置module
  3. 安装style-loader包,再进行配置,style写在css的前面
  4. 在html文件中引入生成的打包好的js文件

loadedr处理less文件

  • 在js文件中导入less文件
  • 安装一个less-loader包，在配置文件中加一个配置less文件的对象
  • less-loader写在css-loader的后面
  • 在html文件中引入生成的打包好的js文件
avatar
文章
阅读
粉丝