webpack的基本使用（1）
前言
官方网址：
以下测试需要在特定的版本下进行实验，否则容易打包报错
"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代码。
步骤
- 初始化项目
npm init -y
- 安装webpack和webpack-cli
# 全局安装
npm init webpack webpack-cli -g
# 安装为开发时依赖
npm init webpack webpack-cli -D
- 创建 build 、src文件夹
- build用于存放打包后的资源，src用于存放源代码
- src文件夹下创建并编写index.js
import data from ‘./data.json‘
console.log(‘hello webpack‘)
console.log(data)
- 执行打包命令
- 开发环境：
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，整体打包环境，是生产环境
- 在页面中引入打包后的资源
built.js，看是否输出内容
原文：https://www.cnblogs.com/it774274680/p/15100621.html