Webpack学习笔记

第一章：webpack简介

1.1 webpack是什么

webpack是一种前端资源构建工具，一个静态模块打包器。

在webpack看来，前端的所有资源文件（js、css、json、）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

1.2 webpack的五个核心概念

Entry：

        入口，webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output：

        输出，打包后的资源输出到哪里去，以及如何命名。

Loader：

        loader可以使webpack处理那些非js文件（webpack本身只能理解js文件）

Plugins：

        插件(plugins)可以用于执行范围更广的任务。插件的范围包括，从打包到压缩，一直到重新定义环境中的变量等。

Mode：

        模式。开发模式和生产模式。开发模式配置比较简单，代码可以运行即可。生产模式能让代码优化上线运行的环境。

1.3 webpack初体验

 开发环境：

webpack ./src/index.js -o .build/built.js --mode=development

 webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

生产环境：

webpack ./src/index.js -o .build/built.js --mode=production

  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

总结：

1.webpack能处理js/json资源 不能处理css/img等其他资源。

2.生产环境比开发环境多一个压缩js代码。体积比较小。

3.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化。

1.4 webpack的安装

我们需要使用node的npm包管理工具，下载webpack和webpack-cli模块

npm install webpack -D

npm install webpack-cli  -D

1.5 自定义webpack配置

一般是通过配置文件的方式来实现webpack的配置。

在当前根目录下新建webpack.config.js，webpack会默认找到该文件并且识别里面的配置内容。

例如：

const path = require('path') 
module.exports = { 
    // 入口
    entry: './src/index.js', 
    // 出口
    output: { 
        filename: 'bundle.js', 

        // 输出文件夹必须定义为绝对路径 
        path: path.resolve(__dirname, './dist') 
    }, 
    mode: 'none' 
}

1.5.1 HtmlWebpackPlugin插件

安装插件：

npm install html-webpack-plugin -D

然后修改webpack配置文件

//... 
module.exports = { 
//... 
    plugins: [ 
    // 实例化 html-webpack-plugin 插件 
    new HtmlWebpackPlugin(
        { 
            // 打包生成的文件的模板 
            template: './index.html', 
            // 打包生成的文件名称。默认为 index.html 
            filename: 'app.html', 
            // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false，默认值为 true  
            inject: 'body'                  
        })
    ]
}

 html-webpack-plugin插件会基于原有的index.html文件打包生成新的html，并且所有的资源js都会自动注入到html中。

 1.5.2 自动清理dist

如果我们需要在打包前自动的把原来dist里面的内容先清空，然后再打包，则需要添加如下配置。

output: { 
    // 打包前清理 dist 文件夹 
    clean: true 
}

这样重新打包的生成的文件夹内，就没有旧文件了。

是不是非常的哇塞，不过我们在开发环境中很少每次都手动去打包，大多数框架封装的webpack都实现了热部署：即我们保存的时候自动帮助重新打包，将修改的内容随时映射到游览器上，且打包的内容放在内存中，不会生成资源文件。 这个稍后再说。

1.5.3 在开发模式下追踪代码

当运行打包好的资源文件时，如果发生报错，我们在游览器中的控制台中只能看到错误指向的bundle.js，看不到报错代码在源代码中的真正位置。

为了更好的追踪error，我们可以使用inline-source-map配置选项。

//... 
module.exports = { 
//... 
    // 在开发模式下追踪代码 
    devtool: 'inline-source-map', 
//... 
}

1.5.4 使用webpack-dev-server

webpack-dev-server具有reloading功能（实时重新加载）

安装：

npm install webpack-dev-server -D

修改配置文件：

//... 
module.exports = { 
//... 
    // dev-server 
    devServer: { 
        static: './dist' 
    } 
}

执行命令：

npx webpack serve --open

webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文 件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。

 

1.4 webpack devServer

当你打包完一个项目，然后修改源代码，需要再次打包，才能展示出最新修改的内容。

devServer自动实现帮你打包。

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出的位置 在build文件夹下
    output: {
        filename: "built.js",
        path: resolve(__dirname,'build')
    },
    // 调用哪些包来处理非js文件
    module: {
        rules: [
            {
                // 针对css文件的处理
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 打包其他资源
            {
                // 排除css\html、js文件的处理
                exclude: /\.(css|js|html)$/,
                type: "asset"
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development"

    // 开发服务器 devServer:用来自动化（自动编译、自动打开游览器，自动刷新游览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为: npx webpack-dev-server
    devServer: {
        // 项目构建后的路径
        // contentBase: resolve(__dirname,'build'),       这种方式在webpack5里面移除了
        static: { // static: ['assets']
            directory: resolve(__dirname, 'build')
        },
        // 启动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        // 自动打开游览器
        open:true
    }
}