了解webpack是什么

webpack的概述

• webpack是一个现代的javascript应用程序的静态模块的打包器

那么webpack做了什么呢

1.语法的转换

• less/sass转换成css
• Es6转换为Es5/Es3
• typescript转换为js

2.html/css/js代码的压缩与合并(打包)

3.webpack可以在开发期间提供一个开发环境

• 自动开启浏览器
• 自动监视文件变化
• 自动刷新浏览器

4.项目一般都需要经过webpack打包之后才上线

webpack模块说明

1.webpack会把所有的资源当成模块

• css
• js
• 图片
• 字体图标

2.webpack给前端开发提供了模块化开发环境

• 对于js文件，webpack中支持AMD.CMD.commonJS.Es6模块化开发语法
• 有了webpack，我们可以在前端代码中任意的使用模块发语法
• 可以在浏览器中使用node.js的模块化语法const $ = require('jquery')

下面我们来使用webpack

1.创建一个文件夹 Webpack-demo

2.初始化项目生成 Package.json

yarn init -y

3.安装webpack的依赖包

yarn add webpack webpack-cli -D

4.新建文件src和dist文件夹，src用于提供源码，dist用于存放打包后的文件

5.在package.json文件配置了打包的脚本

"scripts": {
   
      "build": "webpack --config webpack.config.js"
 }

6.在项目的根目录，创建一个文件webpack.config.js

7.执行打包命令

yarn build

以上就是一个不需要配置的打包过程

下面是webpack的配置了

配置webpack的打包入口

• 在webpack.config.js文件中

module.exports = {
   
   entry: './src/app.js' //默认为index.js 我们改为app.js
}

配置webpack的打包出口

• 在webpack.config.js文件中

  // 配置webpack打包出口
  output: {
   
    // path： 打包出口的目录,默认 dist, 必须指定绝对路径
    path: path.join(__dirname, 'lib'),
    // filename: 打包出口的文件名字  默认 main.js
    filename: 'bundle.js'
  }

如果要配置path，记得是绝对路径

配置webpack的打包模式

  // 打包模式  development|production
  // development: 打包不会对进行压缩   打包快
  // production: 打包会对代码进行压缩  上线
  mode: 'development'

配置html-webpack-plugin插件

html-webpack-plugin插件能够帮助我们自动在dist中生成一个html文件，并且会自动帮我们引入打包后的文件

1.安装html-webpack-plugin插件

yarn add html-webpack-plugin -D

2.在webpack.config.js中配置