webpack的基本使用

什么是webpack

• 静态模块打包器
• 还能翻译和压缩代码
• 减小代码包体积, 让浏览器更快速打开网页

webpack使用前准备

1、创建一个新的文件夹
2、初始化包环境（yarn init -y）
3、安装依赖包（yarn add webpack webpack-cli -D）
4、在package.json中，配置scripts （scripts：{"build":"webpack"}）

webpack基本使用

1、新建src/add/add.js - 定义求和函数导出（export const addFn = (a, b) => a + b）
2、新建src/index.js导入使用：
              import { addFn } from './add/add'
              console.log(addFn(5, 2));
3、运行打包命令（yarn build）

webpack配置修改

默认入口：src/index.js
默认出口：dist/main.js

项目根目录 - 新建webpack.config.js文件 (默认配置文件名)
填入配置项
修改代码里src/index.js 为 src/main.js
重新打包观察输出文件名字

const path = require("path")

module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}

运行yarn build发生了什么

代码源文件和webpack之间关系图

webpack插件

自动生成html文件（yarn add html-webpack-plugin -D）
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ]
}

webpack加载器

1、 file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
2、 url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
3、 source-map-loader：加载额外的 Source Map 文件，以方便断点调试
4、 image-loader：加载并且压缩图片文件
5、 babel-loader：把 ES6 转换成 ES5
6、 css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
7、 style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
8、less-loader： 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
9、 eslint-loader：通过 ESLint 检查 JavaScript 代码

webpack开发服务器

下载包  webpack-dev-server
配置自定义命令serve
scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}
运行命令-启动webpack开发服务器（yarn serve 或者npm run serve）

服务器配置
module.exports = {
    // ...其他配置
    devServer: {
      port: 3000, // 端口号
      open: true // 启动后自动打开浏览器
    }
}