webpack

Posted 2022-08-29 javascript9527

什么是？ 

　　　　wabpack是当前最流行的打包工具

 

webpack能做什么？

　　　　将 sass/less 等预编译css语言 转化为 浏览器能够认识的css文件

　　　　将多个文件打包生成为一个文件

　　　　搭建开发环境（开启了服务器）

　　　　监视文件变化，文件改变后，能够自动刷新浏览器

　　　　对于vue来说，可以将单文件组件（*.vue）类型的文件，　　转化为浏览器能够识别的内容

　　

　　　　项目打包上线：  基于vue脚手架只需要执行一条命令：npm run  build 就可以对项目进行打包处理了

　　　　　　　　　　      所有文件(css/js/html)的压缩合并

　　　　　　　　　　　  在打包的过程中，分离  或者  合并 文件 

　　　　　　　　　　　  能够通过 代码分离功能实现 项目的按需加载（用到什么模块加载什么模块，懒加载）

 

 　　　　　　　　　　　　　　　　命令行使用方式（了解即可）

// webpack 的使用步骤：
//  初始化一个package.json文件 ： npm init -y
// 1 安装： npm i -D webpack webpack-cli
// 2 webpack 使用的两种方式：
//  2.1 命令行的使用方式（知道）
//  2.2 配置文件

// webpack的四个核心概念：
// 1 入口 entry
// 2 出口 打包后输出内容
// 3 loaders 加载器：对于非JS的静态资源
// 4 plugins 插件

// 演示命令行的使用方式：
// webpack 入口文件 出口文件路径
// 最基本的打包: webpack ./src/main.js

// 注意:使用 webpack 的时候应该提供mode, 可以是: production 或者 development
// production 表示: 生产模式(压缩的)    -- 生产环境(也就是给用户使用的)
// development 表示: 开发模式   -- 开发环境(也就是给开发人员开发使用的)

// 指定模式: .\node_modules\.bin\webpack ./src/main.js --mode development
// 指定为生产模式: .\node_modules\.bin\webpack ./src/main.js --mode production

// 演示指定出口文件路径:
//  .\node_modules\.bin\webpack ./src/main.js -o ./dist/a.js --mode production

const fn = () => 
  console.log(‘main.js 中的fn 执行了‘)

fn()

 

main - 2 配置scripts去掉路径前缀.js

/*
.\node_modules\.bin\webpack ./src/main.js --mode development
解决问题: 去掉 .\node_modules\.bin

1 在 package.json 的 scripts 中添加一个 build 脚本
2 将 webpack 命令作为 build 脚本的值  webpack ./src/main.js --mode development
3 在终端中执行命令: npm run build 来运行上面创建好的脚本

package.json文件

  "name": "15-webpack-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "build": "webpack ./src/main.js --mode development",
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  ,
  "dependencies": 
    "jquery": "^3.3.1"
  

*/

const fn = () => 
  console.log(‘main.js 中的fn 执行了‘)

fn()

 

 

main - 3 webpack打包处理的过程.js

/*
webpack打包处理的过程::

案例: 使用jQuery实现隔行变色的效果

浏览器或者NodeJS中 都无法直接识别 import 语法,
但是, 经过webpack打包处理后, 浏览器就能够识别这个语法了

webpack打包处理的过程:
1 运行了webpack的打包命令: webpack ./src/main.js --mode development
2 webpack 就会找到我们指定的入口文件 main.js
3 webpack 就会分析 main.js 中的代码, 当遇到 import $ .... 语法的时候, 那么, webpack
   就知道,我们要使用 jQuery 这个模块
4 webpack 就会将jQuery模块的代码拿过来
5 然后,继续往后分析, 如果在遇到 import 语法, 继续加载这个模块 ...
6 直到分析完成整个 JS 文件后, 将 main.js 中所有用到的模块代码 与 我们自己写的js代码
  打包生成一个JS文件, 也就是 dist/main.js

CommonJS 中的模块化语法
const $ = require(‘jquery‘)
*/

// ES6 中的模块化语法:
import $ from ‘jquery‘

$(‘#list > li:odd‘).css(‘background-color‘, ‘red‘)
$(‘#list > li:even‘).css(‘background-color‘, ‘green‘)

 

 

webpack配置文件的使用（重点使用）

webpack 配置文件的使用方式:

　　　　在项目根目录中创建配置文件: webpack.config.js

/*
package.json文件

  "name": "15-webpack-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "build": "webpack",  //项目完成打包,因为在根目录有webpack.config.js配置文件，所以可以直接使用webpack
    "serve": "webpack-dev-server --hot",  //开发期间使用(启动脚手架)  hot表示热更新，代替下边的三步
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  ,
  "dependencies": 
    "jquery": "^3.3.1"
  

*/


// 注意: 不要使用 ES6 中的模块化语法 import/export
const path = require(‘path‘)    //导入path模块，需要使用绝对路径
// const webpack = require(‘webpack‘)  01 热更新需要引入webpack

// 导入html-webpack-plugin
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

module.exports = 
  // 入口
  entry: path.join(__dirname, ‘./src/main.js‘),//__dirname指当前文件的目录

  // 出口
  output: 
    path: path.join(__dirname, ‘./dist‘),  //出口文件路径
    filename: ‘bundle.js‘    //  出口文件名
  ,

  // 模式
  mode: ‘development‘,//开发环境（程序员看）


  devServer: 
    // 自动打开浏览器
    open: true,
    // 修改端口号
    port: 3000,
    // 热更新: 只将修改过得内容加载到页面中, 而不是刷新整个页面
    // 第一步:02
    // hot: true
  ,

  // 配置loader
  module: 
    rules: [
      // test 是一个正则, 用来匹配加载文件的路径
      //  比如: import ‘./css/index.css‘

      // use 表示使用哪个loader来处理这个类型的文件
      // 注意: 有顺序!!!
      // 处理过程是: 从右往左

      // css-loader 读取CSS文件,将其转化为一个模块
      // style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head
       test: /\.css$/, use: [‘style-loader‘, ‘css-loader‘] 
    ]
  ,

  plugins: [
    // 第二步:03
    // new webpack.HotModuleReplacementPlugin(),

    new HtmlWebpackPlugin(
      // 指定模板文件路径
      template: path.join(__dirname, ‘index.html‘)
    )
  ]

 

// html-webpack-plugin

// 作用:
// 1 根据指定的模板页面(index.html)在内存中生产一个新的页面
//    并且, 浏览器打开的就是 生成的页面
// 2 能够自动引入 css/js 等文件

// 使用:
// 1 安装: npm i -D html-webpack-plugin
// 2 在 webpack.config.js 中导入这个模块
// 3 在 plugins 中配置

// ES6 中的模块化语法:
import $ from ‘jquery‘

$(‘#list > li:odd‘).css(‘background-color‘, ‘#def‘)
$(‘#list > li:even‘).css(‘background-color‘, ‘skyblue‘)

 

/*
开启服务器:

webpack-dev-server    开发期间的服务器

1 npm i -D webpack-dev-server  安装
2 开启服务器
3 自动打开浏览器
4 监视文件变化, 自动刷新浏览器
5 等等

使用步骤:
1 安装: npm i -D webpack-dev-server
2 在 webpack.config.js 中配置 devServer 配置项
3 在 package.json 中添加一个配置项: "serve": "webpack-dev-server"

webpack-dev-server 帮我们搭建了开发环境, 使用之后, 我们只需要
写代码完成功能即可, 其他的所有内容, 这个插件都帮我们处理了

webpack-dev-server 命令 和 webpack 命令的区别:
开发期间 webpack-dev-server
项目打包上线 webpack

webpack 命令会生产 dist 文件夹
webpack-dev-server 不会创建 dist 文件夹, 而是将所有内容放在内存中
*/

// ES6 中的模块化语法:
import $ from ‘jquery‘

$(‘#list > li:odd‘).css(‘background-color‘, ‘#def‘)
$(‘#list > li:even‘).css(‘background-color‘, ‘skyblue‘)