webpack想解决什么问题

在前端项目中更高效的管理和维护项目中的每一个资源

安装

npm i webpack webpack-cli --save-dev

打包

默认：src/index.js ---> dist/mian.js

webpack工作模式

生产：production（优化打包结果，慢）
开发：development（优化打包速度，快）
      none（不做打包处理）

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

module.exports = {
    mode:'none',
    entry:'./src/index.js',   //入口
    output:{
        filename:'bundle.js', //打包后输出的文件名
        path:path.resolve(__dirname,'dist')//打包后输出的文件目录
    },
    module:{                 //loader
        rules:[              //匹配规则
            {
                test:/\.css$/,//匹配.css文件
                use: ['style-loader','css-loader']//使用的loader，从后往前使用
            },
            {
                test:/\.md$/,
                use: ['./loader/md-loader']//自定义loader
            }
        ],
    },
    plugins:[                 //插件
        new CleanWebpackPlugin(),//自动清楚打包目录插件
        new HtmlWebpackPlugin({
            title:'template html',
            template:'./src/index.html',
        }),//自动生成.html插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'second.html'
        }),//自动生成第二个.html
    ]
}

webpack运行机制

解析入口文件，构建依赖树，将指定的文件使用指定的loader打包至输出路劲中，将无法构建的静态资源解析使用loader拷贝至打包文件静态资源目录中