自定义 webpack 安装与配置-02

webpack安装

• 全局安装（不推荐）：会使项目里的webpack锁定到某个版本，在使用不同的webpack版本的项目里边，可能会导致构建失败

        npm install webpack webpack-cli --global

• 本地工作目录安装：

        npm init -y：会生成 package.json文件

        npm install webpack webpack-cli --save-dev：会生成node_modules和package-lock.json文件

配置文件：

在项目根目录下创建 webpack.config.js文件

此时目录结构为：

// hello-world.js文件内容

function helloWorld() {
    console.log('hello world123')
}

export default helloWorld

// index.js文件

import helloWorld from './hello-world'

helloWorld()

在项目根目录，也就是 PACK目录下，终端输入命令：npm install html-webpack-plugin -D 实现自动生成 html 入口文件和引用的 js 文件的功能

在 webpack.config.js 文件内进行配置

// 引入绝对路径模块
const path = require('path')
// 引入上面安装的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 出口文件
    output: {
        // 指定输出文件的文件名
        filename: 'bundle.js',
        // 文件的输出路径，要设置绝对路径
        path: path.resolve(__dirname, './dist'),
        // 生成最新打包文件，清掉之前dist文件夹
        clean: true
    },
    // 开发模式
    mode: 'development',
    // 控制台精准定位代码错误位置行数
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            // 模板
            template: './index.html',
            // 输出的文件名
            filename: 'app.html',
            // script标签生成的位置
            inject: 'body'
        })
    ]
}

此时终端切换到目录为 03-manage-output，输入 npx webpack，会生成 dist 文件夹，包含 输出的文件名 app.html 和 bundle.js

执行命令：npx webpack，复制 app.html 路径到浏览器打开，每次页面进行修改，必须复制路径到浏览器打开，很麻烦。

执行命令 npx webpack watck mode，会实现编译时的自动监测文件变化的功能，但是需要手动刷新浏览器，也很麻烦。so....

安装 webpack-dev-server 插件，监测变化，实现编译，还能自动的实现浏览器的刷新

切换到项目根目录（PACK），执行命令：npm install webpack-dev-server -D

在 webpack.config.js 文件中配置，并保存

devServer: {
    static: './dist'
}

 此时切换到 04-development 目录终端输入 npx webpack-dev-server （node版本一定要 >= v12.13.0）

打开 http://localhost:8080/，并点击打开 app.html文件 此时不用刷新浏览器，可自动实时更新页面内容