webpack5 安装自定义配置使用

最新推荐文章于 2024-07-15 10:00:00 发布

悟空_大师兄_

最新推荐文章于 2024-07-15 10:00:00 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： webpack 前端

本文链接：https://blog.csdn.net/weixin_39007040/article/details/121675471

版权

webpack 安装

创建项目目录：webpakc-dome

进入目录初始化npm操作：npm init -y

安装webpack webpack-cli ：npm install webpack webpack-cli -D

运行命令：webpack --mode development （开发）

运行命令：webpack --mode production（生产）

webpack 基础模板

const { resolve } = require('path')//nodejs 方法

export.moduls= {

        entry: '', //入口 以哪个文件作为入口开始打包 例：’./src/index.js‘

        mode: 'development',//模式 开发 development    生产 production

        output: {

                filename: 'build.js', // 文件名

                path: resole(_dirname, 'build') //文件目录i

        },//输出 默认输出在dist 

        module:  {

                rules: []

        }, //loader 模块 让webpack处理非JavaScript资源 css img等

        plugins: [

                

        ]// 插件 打包优化

}

入口输出 entry output

const { resolve } = require('path')

export.moduls= {
        mode: 'development',
        //if entry Array数组形式
        entry: [
            './src/index.js',
            './src/indexTwo.js'
        ], //多入口 Array数组形式 打包行成一个chunk 输出一个bundle
        output: {
                filename: 'index.js',
                path: resole(_dirname, 'build')
        },

        //else if entry 对象写法 object
        entry: {
            one:'./src/index.js',
            two:'./src/indexTwo.js'
        }, //多入口 objct数组形式 几个入口生成几个chunk 输出几个bundle
        output: {
                filename: '[name].js',
                path: resole(_dirname, 'build')
        },

        //else 特殊写法
        entry: {
            one: ['./src/index1.js', './src/index2.js'],
            two:'./src/indexTwo.js'
        }, //多入口 objct数组形式 几个入口生成几个chunk 输出几个bundle chunk名称是key
        output: {
                filename: '[name].js',
                path: resole(_dirname, 'build')
        },
        module: {
                rules: []
        },
        plugins: []
}

webpack 打包资源HTML

使用插件plugins 对HTML文件进行处理 *（html-webpack-plugin）

下载安装 npm i html-webpage-plugin -D

引用 const HtmlWebpackPlugin = require('html-webpack-plugin')

使用 new HtmlWebpackPlugin()

const { resolve } = require('path')//nodejs 方法
const HtmlWebpackPlugin = require('html-webpack-plugin')

export.moduls= {
        entry: {
            one: ['./src/index1.js', './src/index2.js'],
            two:'./src/indexTwo.js'
        },
        mode: 'development',
        output: {
                filename: '[name].js',
                path: resole(_dirname, 'build')
        },
        module:  {
                rules: []