webpack

概念 ==> webpack 是什么?? 前端模块化打包(构建)工具

webpack 的两个方面

1.打包 2.模块化

一、 打包: 前端打包(构建)都能做什么??

1.语法转换

 Less/SASS 预编译css --> css --> 浏览器中使用 ES6 新语法有兼容性问题 -> ES5 ->浏览器中使用
const fn = () => {} ==> var fn = function(){}

2.文件压缩、合并

JS/HTML/CSS 压缩后, 才能发布上线

文件合并 (不管有多个JS,CSS, 默认打包生成一个js文件)

3.开发期间提供一个服务环境

自动打开浏览器、见识文件变化,自动刷新浏览器

4.项目上线,打包后才能上线

5.总结

webpack 这个打包(构建)工具,就是提供

二、模块化功能

三、webpack 的四个核心概念

入口(entry)、出口(output)、加载器(loader)、插件(plugins)

入口：要打包哪个文件

出口：要打包哪里

加载器：加载除了js文件其他文件的功能

插件：处理加载器完成不了的功能,使用插件

四：学习 手动配置webpack的目的

为我们后面使用脚手架做准备

掌握webpack的四个核心概念

大概了解webpack常用的loader的作用

webpack的使用步骤:

webpack 第一阶段 命名初始化阶段

文件名不能有汉字,不能取名为webpack

1.生成package.json，命令：npm init -y
2.安装: npm i -D webpack webpack-cli
webpack ：是webpack  工具的核心包
webpack-cli ：提供了一些在终端中使用的命令
--D(--save--dev)：表示项目开发周期的依赖,也就是线上代码用不到这些包了

1.安装webpack ： npm i webpack webpack-cli -D

2.在package.json 里面的 scripts 里面添加一个 'build'脚本

3.在终端里: npm run build

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development'

如果你要是想设置的话 ：development or production
develop ：开发环境(代码不压缩)
production ：发布环境(代码压缩)

{
  "name": "wepack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack src/main.js --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  }
}

1.打包的方式 : 两种: 1-命令行 2-配置文件

2.命令行：

2.1现在 ："build": "webpack ./src/mian.js --mode prouction"

2.2我们可以自己写指定打包文件路径

格式 : webpack 入口文件 --output 出口文件

"build": "webpack ./src/main.js --output ./dist/bundle.js"

配置文件webpack.json

webpack 第二阶段 webpack配置文件：webpack-dev-server（最绕）

webpack 第二阶段 webpack配置文件 html-webpack-plugin