webpack的基本使用(1)

前言

官方网址:https://webpack.docschina.org/

以下测试需要在特定的版本下进行实验,否则容易打包报错

"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"

webpack帮助命令:webpack --help

出现打包后报错的问题,极大多数是因为版本问题,可以适当的降低版本看是否解决

简介

为什么需要webpack

为解决在浏览器的页面中使用.less作为样式文件、.js文件中使用高级的ES语法(比如:import $ from ‘jquery‘导入模块)无法使用的问题,需要使用第三方工具来将less文件转换为css文件、将JS中ES6以及以上的语法编译为低版本使浏览器能识别的js语法。

因此需要一款构建工具,将所有进行需要转换的工具进行整合,然后使用构建工具进行处理。webpack就是其中一款构建工具

比如:index.html不能直接使用script标签引入下面index.js

import $ from ‘jquery‘
$(‘body‘).css(‘backgroundColor‘,‘pink‘)

webpack是什么

webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。

它会根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。

  • 根据入口文件(index.js)分析加载的模块资源,形成 chunk块(代码块)
  • 根据代码块中对应的类型进行处理形成浏览器能识别的资源。
  • 将上面形成的资源整合成一个 bundle

核心概念

entry:指定哪个文件开始打包,其会分析内部的依赖(类似main方法入口,然后依次往下执行调用)

loader:可以将webpack不能识别的资源 编译成 webpack能识别的资源,这样webpack就能处理了

plugins:比如将样式文件进行压缩,不是编译操作

output:webpack打包后的资源 bundle 输出到哪里去

mode:webpack使用的模式,有开发模式、生产模式

初体验

结论

  • webpack能处理js/json资源,不能处理css/img等其他资源
  • 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
  • 生产环境比开发环境多一个压缩js代码。

步骤

  1. 初始化项目
npm init -y
  1. 安装webpack和webpack-cli
# 全局安装
npm init webpack webpack-cli -g

# 安装为开发时依赖
npm init webpack webpack-cli -D
  1. 创建 build 、src文件夹
    • build用于存放打包后的资源,src用于存放源代码
  2. src文件夹下创建并编写index.js
import data from ‘./data.json‘

console.log(‘hello webpack‘)
console.log(data)
  1. 执行打包命令
  • 开发环境:webpack ./src/index.js -o ./build/built.js --mode=development
    • -o,outputpath,表示指定输出的位置
    • 表示webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js,整体打包环境,是开发环境
  • 生产环境:webpack ./src/index.js -o ./build/built.js --mode=production
    • 表示webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js,整体打包环境,是生产环境
  1. 在页面中引入打包后的资源 built.js,看是否输出内容

webpack的基本使用(1)

上一篇:从 Webpack Tapable 详解


下一篇:纯css实现圆柱体