webpack配置基础01

webpack
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

3.在项目中安装 webpack
在终端运行如下的命令，安装webpack相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.7.2-save-dev

-S 是–save的简写
-D 是–save-dev的简写

在项目中配置 webpack

1. 创建webpack.config.js 文件

2. module.exports = {
	mode:'development'  //mode用来指定构建模式。可选值有 development和production
	
}

2. 配置各种loader
   install style-loader css-loader 两个loader 处理css

const path = require("path");

module.export = {
    // 打包模式
    mode: "development",
    // 确定入口文件
    entry: "./src/index.js",
    // 确定打包完的 路径，文件名
    output: {
        filename: 'build.js', //输入文件
        //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径 
        path: __dirname, //输出位置
    },

    // 配置各种loader
    // 1. install style-loader css-loader 两个loader 处理css
    module: {
        rules: [
            {
                test: /\.css/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    }


}

还可以配置端口号，

配置插件