webpack的基本使用

webpack：
webpack是一种前端资源构建工具 一个静态模块打包器
在webpack看来 前端所有资源文件都会作为模块处理
他将根据模块的依赖关系进行静态分析 打包生成对应的静态资源
与webpack类似的gulp grunt browserify

webpack官方网址

webpack的特点：
1、模块化；2、Tree shaking；3、代码懒加载

webpack的核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

安装webpack
在使用webpack之前首先我们要讲webpack安装到我们的项目目录中

npm install --save-dev webpack-cli

在node_modules的同级目录也就是一级目录下创建一个webpack.config.js文件。

再来配置我们自己的webpack属性。
首先在webpack.config.js文件内引入node的path模块

const path = require("path")

然后定义module.exports对象，定义webpack打包的属性

module.exports = {
	// 入口
    entry:"./src/index.js",
    // 输出
    output:{
        // 输入的文件名字使用入口文件的名字
        filename:"[name].js",
        // 调用path模块
        path:path.resolve(__dirname,"bundle")
    }
}

loader的使用需要通过命令行下载对应的loader

module.exports = {
	 // 模块
    // loader配置需要使用module.rules
    module:{
        rules:[
            {
            //  匹配打包文件规则
                test:/\.jpg|png|gif\$/,
                use:{
					// loader 用于对模块的源代码进行转换
					// 
                    loader:"file-loader", 
                    options:{
                        // 使用原名
                        name: "[name].[ext]",
                    }
                }
            },
            {
            	// 可以有多个loader对象  匹配不同的文件
                test:/\.vue$/,
                use:{
                    loader:"vue-loader"
                }
            },
        ]
    }
}

plugins也是一样,使用的话也是需要安装对应的plugin,plugins也有很多第三方的插件

• 安装之后需要引入

// 自动生成html文件并把打包的js引入
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 先删除打包文件再打包
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	plugins:[
	//实例化对象
	new HtmlWebpackPlugin({
        template:"./index.html"
    }),
    new CleanWebpackPlugin()
    ],
}

webpack的配置项有很多，遇到相应的业务可以上网去查询，然后进行自行配置。
webpack是工作中必不可少的，一定要了解。