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

2. 安装webpack和webpack-cli

# 全局安装
npm init webpack webpack-cli -g

# 安装为开发时依赖
npm init webpack webpack-cli -D

3. 创建 build 、src文件夹
   • build用于存放打包后的资源，src用于存放源代码
4. src文件夹下创建并编写index.js

import data from './data.json'

console.log('hello webpack')
console.log(data)

5. 执行打包命令

• 开发环境：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，整体打包环境，是生产环境

6. 在页面中引入打包后的资源 built.js，看是否输出内容