Webpack4.x记录

安装

npm init
npm install --save-dev webpack webpack-cli
复制代码

新建 webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    mode:'development',
    entry:{
        app:'./src/app.js'
    },
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader']},
            {test:/\.(png|jpg|svg|gif)$/,use:[{loader:'url-loader',options:{limit:10240}}]}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[id].css'
        })
    ]
}
复制代码

一个简单的例子

app.js

const _ = require('lodash')
function main(){
    let elem = document.createElement('div');
    elem.innerHTML = _.join(['hello','webpack'], ' ');
    return elem;
}
document.body.append(main())
复制代码

打包
通过npm脚本

{
    ...
    "scripts":{
        "dev":"webpack --config webpack.config.js"
    }
    ...
}
复制代码

执行

npm run dev
复制代码

热更新

webpack-dev-server

npm install --save-dev webpack-dev-server
复制代码

修改webpack.config.js文件

{
    ...
    contentBase:'dist'
    ...
}
复制代码

修改package.json文件

{
    ...
    "scripts":{
        "dev":"webpack-dev-server --open --config webpack.config.js"
    }
    ...
}
复制代码

代码分离

1. 多入口

{
    entry:{
        app:'./src/app.js',
        main:'./src/main.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js',
        chunkFilename:'[name].js'  
    },
    optimization{
        splitChunks:{
            chunks:'all'
        },
        runtimeChunk:{
            name:'manifest'
        }
    }
}
复制代码

2. 动态导入

async function main(){
    let elem = document.createElement('div');
    var _ = await import(/* webpackChunkName: "lodash" */,'lodash');
    _ = _.default;
    elem.innerHTML = _.join(['hello','webpack','!'],' ');
    return elem;
}
复制代码

懒加载

app.js

async function main(){
    let elem = document.createElement('button');
    elem.innerText = 'click';
    elem.addEventListener('click',()=>{
        import(/* webpackChunkName: "print" */,'./print.js').then((module) => {
            let print = module.print;
            print()
        })
    })
    return elem;
}
复制代码

print.js

function print(){
    console.log(`Button Clicked !`)
}
export {print}
复制代码

缓存

const webpack = require('webpack')
const isProduct = process.env.NODE_ENV === 'production';
optimization:{
    splitChunks:{
        chunks:'all',
        minSize:30000,
        minChunks:1,
        maxAsyncRequests:5,
        maxInitialRequests:3,
        automaticNameDelimiter:'~',
        cacheGroups:{
            vendors:{
                test:/[\\/]node_modules[\\/]/,
                name:'vendors',
                chunks:'all',
            },
            commons:{
                name:'commons',
                chunks:'all',
                minSize:0,
                minChunks:2
            }
        }
    },
    runtimeChunk:{
        name:'manifest'
    }
},
plugins:[
    isProduct ? new webpack.HashedModuleIdsPlugin() : new webpack.NamedModulesPlugin()
]
复制代码