webpack 动态链接库基础配置

1.webpack.config_dll.js

const path=require('path')
const  DllPlugin=require('webpack/lib/DllPlugin')
module.exports={
    entry:{
        vendors:['jquery']
    },
    mode:'development',
    output:{
        filename:'vendors.js',
        path:path.join(__dirname,'/dll'),
        library:'_dll_[name]',
        libraryTarget:'var'
    },
    plugins:[new DllPlugin({
        name:'_dll_[name]',
        path:path.join(__dirname,'/dll','[name].manifest.json')
    })],
}

2.webpack.config.js

const path=require('path');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DllReferencePlugin=require('webpack/lib/DllReferencePlugin')
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    mode:'development',
    output:{
        filename:'js/[name]webpack.config.js',
        path:path.join(__dirname,'/dist'),
        clean:true,
        library:['MyLibrary','[name]'],
        libraryTarget:'var'
    },
    module:{
        rules:[
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader
                    },
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
        ],
        noParse:/jquery/,
    },
    resolve:{
        // modules:['node_modules']
    },
    watch:false,
    watchOptions:{
        ignored:/node_modules/
    },
    devServer:{
        hot:true,
        hostname:'127.0.0.1',
        port:9000
    },
    plugins:[
        new MiniCssExtractPlugin(),
        new CssMinimizerPlugin(),
        new HtmlWebpackPlugin(),
        new DllReferencePlugin({
            manifest:require('./dll/vendors.manifest.json'),
        })
    ],
    devtool:'source-map'
}