Webpack——output详细配置

output详细配置

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
    // 模式
    mode: 'development',
    // 入口文件
    entry: './src/index.js',
    // 输出
    output: {
        // 文件名称（指定名称 + 目录）
        filename: 'built.js',
        // 输出文件目录（将来所有资源输出的公共目录）
        path: resolve(__dirname, 'build'),
        // 所有资源引入公共路径前缀--> 'imgs/a.jpg' --> '/imgs/a.jpg'
        publicPath: '/',
        // 非入口chunk的名称，就是代码分割生成的js名称
        chunkFilename: 'js/[name]_chunk.js',
        // 整个库向外暴露的变量名
        library: '[name]',
        // 将上面的变量名添加到指定对象上window、global、commonjs
        libraryTarget: 'window',
    },
    module: {
        // 需要使用的loader
        rules: []
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        // 告诉webpack哪些库不参与打包，并且使用名称也得变
        new webpack.DllReferencePlugin({
            manifest: resolve(__dirname, 'dll/manifest.json')
        }),
        // 将某个文件打包输出，并在html中引入该资源
        new AddAssetHtmlWebpackPlugin({
            // 指定要打包的文件路径
            filepath: resolve(__dirname, 'dll/jquery.js'),
            // 输出目录
            outputPath: 'dll',
            // html引入的路径
            publicPath: './dll',
            attributes: {
                nomodule: false,
            },
        }),
    ],
}