webpack_day01

webpack_day01

环境搭建

    npm i webpack webpack-cli -D

在webpack.config.js设置入口和出口

    const path = require('path');
    module.exports = {
    
    
        entry:'./src/index.js',
        output:{
    
    
            filename:'bundle.js',
            path:path.join(__dirname,'dist')
        }
    }

设置index.html 安装html-webpack-plugin

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports={
    
    
        plugins:[
            new HtmlWebpackPlugin({
    
    
                template:"./public/index.html",
                filename:"app.html",
                title:"webpack day01"
            })
        ]
    }

设置清除dist文件

    // 在output里加一个clean:true
    module.exports={
    
    
        output:{
    
    
            clean:true
        }
    }

设置开发环境代码报错查看 devtool

    module.exports={
    
    
        devtool:"inline-source-map"
    }

设置开发环境 热更新 使用 webpack --watch 或者 安装 webpack-dev-server

    // npm i webpack-dev-server -D
    module.exports={
    
    
        devServer:{
    
    
            static:"./dist",
            open:true,
            host:"localhost",
            hot:true
        }
    }

pageage.json配置dev 和 build

    "build": "webpack",
    "dev": "webpack-dev-server"

wepack中的资源类型 asset/resource asset/source asset/inline asset

    module:{
    
    
        rules:[
            {
    
    
                test:/.png$/,
                type:'asset/resource' // 会打包生产到dist目录 形成本地资源
            },
              {
    
    
                test:/.jpg$/,
                type:'asset/inline' // 不会打包生产到dist目录 直接在js里设置了 
            }，
             {
    
    
                test:/.txt$/, 
                type:'asset/source' // 源文件 用于解析 txt文件
            },
               {
    
    
                test:/.png$/, 
                type:'asset' // 在resource 和 inline 自动选择 8 * 1024  inline 是baseUrl resource 是解析完整的路径
            }
        ]
    }