webpack概述

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler )

webpack中文网

webpack官网

webpack做了什么

• 语法转换
  • less/sass转换成css
  • ES6转换成ES5
  • typescript转换成js
• html/css/js代码的压缩与合并（打包）
• webpack可以在开发期间提供一个开发环境
  • 自动开启浏览器
  • 自动监视文件变化
  • 自动刷新浏览器
• 项目一般都需要经过webpack打包之后才上线。

webpack模块说明

webpack会把所有的资源都当成模块

• css
• js
• 图片
• 字体图标

webpack给前端开发提供了模块化的开发环境

• 对于js文件，webpack中支持AMD、CMD、commonJS、ES6模块化等语法
• 有了webpack，我们可以在前端代码中使用任意的模块化语法
• 可以在浏览器中使用nodejs的模块化语法const $ = require('jquery')

webpack安装步骤

• 项目初始化

yarn init -y

• 安装

yarn add webpack webpack-cli -D

• 准备配置文件

  "scripts": {
    "test": "webpack -v"
  },

• 使用命令

yarn test  # 就可以看到webpack的版本了   npm run test

为题：问什么不全局安装

webpack初体验

• 准备项目目录（固定的结构，为后面的项目做基础准备）

- webpack-demo				//最外层, 项目根目录
	- dist					// + 输出目录，在浏览器中运行的目录
	- node_modules			// 安装 npm 包时自动生成
	- src					// + 开发目录
  - package.json			// 项目配置文件, npm init 初始化项目时自动生成

• 在src下新建index.js

console.log('webpack基本使用')

• 准备配置文件webpack.config.js

// 在项目根目录下创建该配置文件
const path = require('path');

module.exports = {
    entry: './src/index.js',					// 项目入口
    output: {
        filename: 'bundle.js',                  // 默认打包后的文件名 bundle.js
        path: path.join(__dirname, 'dist')   // 默认打包后的文件目录 dist
    }
};

• 配置打包命令

"scripts": {
    "test": "webpack -v",
    "build": "webpack --config webpack.config.js"
}

• 运行npm脚本进行打包

yarn build

• 模式的配置

// 设置打包的模式
//'production'
// development  development模式下打包速度更快。
mode: 'production'