概述

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

webpack 能做什么

1. 语法转换
   • less/sass/stylus转换成css
   • ES6转换成ES5
   • ...
2. html/css/js 代码压缩合并 (打包)
3. webpack可以在开发期间提供一个开发环境
   • 自动打开浏览器
   • 保存时自动刷新
4. 项目一般先打包再上线 ............

webpack 的基本使用

一.webpack基本打包配置

1.建目录 src/main.js

2.初始化

yarn init -y （yarn init 与 npm init 一样通过交互式会话创建一个 package.json、模块的描述文件，被称为package.json，记录包）

3.安装依赖包

yarn add webpack webpack-cli -D

-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的

4.根目录新建 webpack.config.js

const path = require('path')

module.exports = {

 // entry: 配置入口文件 (从哪个文件开始打包)
 entry: './src/main.js',
 // output: 配置输出 (打包到哪去)
 output: {
   // 打包输出的目录 (必须是绝对路径)
   path: path.join(__dirname, 'dist'),
   // 打包生成的文件名
   filename: 'bundle.js'
 },
 // 打包模式 production 压缩/development 不压缩
 mode: 'development'

}

5.到package.json文件中, 配置scripts

scripts: {
 "build": "webpack --config webpack.config.js"  （打包时寻找webpack.config.js中的配置）
}

6. 执行配置的scripts脚本

yarn build
----生成图3