1.先简单打包一个js文件

先创建一个空的文件夹WEBPACK ，npm init -y先初始化出packge.json文件
安装 npm i webpack-cli -D和 npm i html-webpack-plugin和npm i webpack -g
手动添加一个src文件夹以及里面的子文件夹会有webpack.config.js文件

index.js加上几行代码

function add(a, b) {
    return a + b
}
export default add

index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../main.js"></script>
    <title>Document</title>
</head>

<body>
<div id="app">hello</div>
</body>

</html>

main.js代码

import add from './js/index.js'
console.log(add(2, 2));

4.在webpack.config.js**文件添加配置注意路径不能错

const path = require('path'); //获取此文件在电脑的根路
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', //开发模式  还有一个production模式 不会被压缩但是会打包成浏览器能识别的模式 产品发布到服务器的是后用 production打包的文件会被压缩
    entry: './src/main.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), //输出文件的路径 
        filename: 'js/bundle.js' //指定输出的文件名  打包完会自动创建一个dist文件夹里面还有一个js文件夹
    },
    plugins: [
        new HtmlWebpackPlugin({
                template: './src/js/index.html'
            }

        )
    ]
}

5.命令行输入webpack就可以运行
6. 打包完会生成dist文件夹

2.自动打包（热更新）

npm i webpack-dev-server -D 2.配置devServer在webpack.config.js

const path = require('path'); //获取此文件在电脑的根路
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production', //开发模式  还有一个production模式 不会被压缩但是会打包成浏览器能识别的模式 产品发布到服务器的是后用 production打包的文件会被压缩
    entry: './src/main.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), //输出文件的路径 
        filename: 'js/bundle.js' //指定输出的文件名  打包完会自动创建一个dist文件夹里面还有一个js文件夹
    },
    plugins: [
        new HtmlWebpackPlugin({
                template: './src/js/index.html',
                removeAttributeQuotes: true,
                collapseWhitespace: true
            }

        )
    ],
    devServer: {
        port: 5000,
        compress: true,
        open: true,
        client: {
            progress: true
        }
    }
}

配置一个名为 dev 的脚本指令在package.json中 "scripts": {"dev": "webpack-dev-server" // },
输入npm run dev运行起来（跟npm run serve一样）自动打开页面
把dist文件夹删了也不会有影响，会有虚拟dist自动打包运行

3.打包处理css文件

npm i style-loader css-loader 2.加上moudle对象

const path = require('path'); //获取此文件在电脑的根路
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production', //开发模式  还有一个production模式 不会被压缩但是会打包成浏览器能识别的模式 产品发布到服务器的是后用 production打包的文件会被压缩
    entry: './src/main.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), //输出文件的路径 
        filename: 'js/bundle.js' //指定输出的文件名  打包完会自动创建一个dist文件夹里面还有一个js文件夹
    },
    plugins: [
        new HtmlWebpackPlugin({
                template: './src/js/index.html',
                removeAttributeQuotes: true,
                collapseWhitespace: true
            }

        )
    ],
    module: {   // 这个节点，用于配置所有第三方模块加载器
        rules:[ // 所有第三方模块 匹配规则
            {
                test: /\.css$/,     // 匹配以.css文件结尾的文件
                use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
            }
    },
    devServer: {
        port: 5000,
        compress: true,
        open: true,
        client: {
            progress: true
        }
    }
}

在main.js引入css就可以npm run dev运行了

4.打包处理less文件

1,。npm i sass -D npm i sass-loader -D 2.

const path = require('path'); //获取此文件在电脑的根路
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production', //开发模式  还有一个production模式 不会被压缩但是会打包成浏览器能识别的模式 产品发布到服务器的是后用 production打包的文件会被压缩
    entry: './src/main.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), //输出文件的路径 
        filename: 'js/bundle.js' //指定输出的文件名  打包完会自动创建一个dist文件夹里面还有一个js文件夹
    },
    plugins: [
        new HtmlWebpackPlugin({
                template: './src/js/index.html',
                removeAttributeQuotes: true,
                collapseWhitespace: true
            }

        )
    ],
    module: {   // 这个节点，用于配置所有第三方模块加载器
        rules:[ // 所有第三方模块 匹配规则
            {
                test: /\.css$/,     // 匹配以.css文件结尾的文件
                use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
            }，
            { 
            test: /\.less$/, 
            use: ['style-loader','css-loader','less-loader'] }
        ]
    },
    devServer: {
        port: 5000,
        compress: true,
        open: true,
        client: {
            progress: true
        }
    }
}

5.引入vue语法搭建vue/cli

1.npm i vue -D 2.npm i vue-loader使webpack 能读懂.vue后缀文件 3.npm i @vue/compiler-sfc 编译vue文件成虚拟dom结构 4.修改webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader/dist/index')
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/name.js'
    },
    module: { // 这个节点，用于配置所有第三方模块加载器
        rules: [ // 所有第三方模块 匹配规则
            {
                test: /\.css$/, // 匹配以.css文件结尾的文件
                use: ['style-loader', 'css-loader'] // 指定要处理的.css文件的加载器
            },
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
                template: './index.html',
                titel: '手动搭建vue/cli'
            }

        ),
        new VueLoaderPlugin()
    ]
}

5.创建一个app.vue文件然后引入main代码如下

import { createApp } from 'vue'
import App from './app.vue'
const app = createApp(App)
app.mount('#app')

   filename: 'js/[name].[contenthash].js'//每次跟新完main.js名字不一样

更新浏览器缓存缓存 7.删除老版本 npm i clean-webpack-plugin -D 8.每次打包之前删除上一次内容

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader/dist/index')
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].[contenthash].js'
    },
    module: { // 这个节点，用于配置所有第三方模块加载器
        rules: [ // 所有第三方模块 匹配规则
            {
                test: /\.css$/, // 匹配以.css文件结尾的文件
                use: ['style-loader', 'css-loader'] // 指定要处理的.css文件的加载器
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
                template: './index.html',
                titel: '手动搭建vue/cli'
            }

        ),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin()
    ]
}

6.降级es5

npm i @babel/core -D npm i @babel/preset-env -D npm i babel-loader -D 2.配置webpack.config.js

    {
                test: /\.js$/,
                exclude: '/node_modules',
                loader: 'babel-loader'
            }

3.创建babel.config.js文件代码如下

module.exports = {
    presets: [
        ["@babel/preset-env", {
            "targets": {
                "browsers": ["last 2 versions"]
            }
        }]
    ]
}

webpack与手动搭建vue/cli