webpack

自动引入js文件

html-webpack-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true  //清理dist
    },
    mode: 'none',
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',   //模板基础
            filename: 'app.html',       //定义自动生成的html文件名
            inject: 'body'
        })
    ]
}

使用mode模式

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true  //清理dist
    },

    mode: 'development',

    devtool: 'inline-source-map',   //解决源代码与打包后的代码不对应问题
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',   //模板基础
            filename: 'app.html',       //定义自动生成的html文件名
            inject: 'body'
        })
    ]
}

source map解决问题：devtool: 'inline-source-map', //解决源代码与打包后的代码不对应问题

实时侦测js文件变化：npx webpack --watch

解决浏览器实时重新加载： npm install webpack-dev-server -D

执行命令npx webpack-dev-server

配置文件添加： devServer: { static: './dist' }

资源模块介绍：

   {
                test: /\.(css|less)$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }

安装css-loader:

安装：style-loader

安装less-loader:

安装mini-css-extract-plugin -D实现抽取分离

安装压缩css的包：

安装csv和xml的loader配置文件：

自定义项目json模块的parser

babel-loader的安装

代码分离：

entry入口点（方法一）

 entry: {
        index: './src/index.js',
        another: './src/another.js'
    },

output: {
        filename: '[name].bundle.js',    //多文件名
        path: path.resolve(__dirname, 'dist'),
        clean: true,  //清理dist
        assetModuleFilename: 'images/[contenthash][ext]'   //统一自定义文件名和路径
    },

防止重复（2种）

方法一

 index: {
            import: './src/index.js',
            dependOn: 'shared'
        },
        another: {
            import: './src/another.js',
            dependOn: 'shared'
        },
        shared: 'lodash'

方法二

  entry: {
        index: './src/index.js',
        another: './src/another.js'
    },
 optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }

动态加载

在方法二的基础上直接引入

function getComponent() {
    return import('lodash').then(({ default: _ }) => {
        const element = document.createElement('div')
        element.innerHTML = _.join(['hello', 'webpack'], ' ')
        return element
    })
}

getComponent().then(element => {
    document.body.appendChild(element)
})

拆分生产环境和开发环境

npm i terser-webpack-plugin -D（传参区分打包）

拆分配置文件

  splitChunks: {

            cacheGroups: {

                vendor: {                       //将所有第三方库提取vendor文件夹

                    test: /[\\/]node_modules[\\/]/,     //匹配node_modules中的文件

                    name: 'vendors',

                    chunks: 'all'

                }

            }

        }提取文件

深合并配置