webpack详解

一. webpack简介

1.webpack是什么

webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 简单来说,webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言(例如:Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

2.webpack 五个核心概念

• entry
  入口:指示 webpack 以那个文件为入口起点开始打包,分析构建内部依赖图。

entry: "./src/index.js",// 入口 (webpack 从哪个文件开始运行)

• output
  输出: 指示 webpack 打包后文件的名称和位置。

output: {
        path: __dirname + "/dist",// 目录
        filename: "main-[hash].js",// 打包好的js文件名称
    },

• loader
  loader:让 webpack 能够去处理那些非 JS 的文件,比如样式文件,图片文件(webpack 自身只理解JS)

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。

• plugins
  插件:可以用于执行范围更广的任务.插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等
  目的:在于解决loader无法实现的其他事
• mode
  模式(mode):指示 webpack 使用相应的配置(开发环境和生产环境)
  development(开发环境):能让代码本地调试运行的环境
  production(生产环境):能让代码优化上线运行的环境

二. webpack 初始化

1. 初始化配置

• 初始化 package.json
  指令: npm init
• 下载安装 webpack:
  全局安装: npm i webpack webpack-cli -g
  本地安装: npm i webpack webpack-cli -D

webpack 开发环境的配置

1. webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.js",// 入口 (webpack 从哪个文件开始运行)
    output: {
        path: __dirname + "/dist",// 目录
        filename: "main-[hash].js",// 打包好的js文件名称
    },
    mode: "development",// 模式 产品模式：production 开发模式：development
    module: {
        // 规则
        rules: [
        // 打包css文件：注意style-loader和css-loader的前后循序不能写错
            { "test": /\.css/, use: ["style-loader", "css-loader"] },
            {
                "test": /\.(png|jpg|jpeg|svg|ico|bmp|gif|webp)/,
                use: [
                    {
                        loader: "url-loader", options: {
                            name: "img/[hash].[ext]",
                            // 如果小于10k就打包base64
                            limit: 10240,//如果文件小于3k 转换为base64 代码格式 
                        }
                    }
                ]

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ "template": "./public/index.html" })
    ],
    devServer: {
        host: "localhost",
        port: 8080,
        hot: true,
        open: true,
    }
}