最通俗易懂的webpack5 带你简单入门

1.什么是webpack？
webpack是用于编译JavaScript模块。
通俗的来说，webpack的一个模块打包器。本质上就是一个构建（包含：编译，压缩，丑化等）工具，且是目前最流行的构造工具。可以对所有资源（.html,.sass,.scss,.css,.png|.jpg|.jpeg,.js|.ts,模板文件ejs,hbs,pug）进行打包。
2.如何安装
2.1cnpm i webpack -g
cnpm i webpack-cli -g
或者cnpm i webpack webpack-cli -g
当然没有镜像的可以用npm 下载速度较慢而已 (可以在终端运行webpack相关命令)
2.2 npm init -y
创建文件夹并初始化，文件夹中会出现package.js文件，是基础的一些配置，包括文件名称/版本/描述/入口文件/关键字/作者等。

我安装的版本如下：
因为webpack-dev-server不支持webpack5.0和webpack-cli4.0
所以编译的时候用 webpack serve

3.使用webpack.config.js配置

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: __dirname + "/src/index.js", // 入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    // 配置本地服务器
    devServer: {
        // 静态资源目录，index.html所在的目录。
        contentBase: path.join(__dirname, 'dist'),
        index: 'index.html',
        compress: true, // 是否压缩 
        port: 9000, // 服务器的端口
        host: "localhost", // 主机
        open: true,
        hot: true,
    },
    // 安装的各种loaders在module模块中配置着。
    module: {
        // 每一个loader本质上就是module中的一个规则rule
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader','css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            }
        ]
    },
    // webpack所使用的插件，其中BannerPlugin是webpack内置的插件。
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')
    ]

}

4.
此外还有进阶版
从零开始搭建一个简单的基于webpack的vue开发环境
https://segmentfault.com/a/1190000012789253