初始化项目配置-webpack配置

1. npm init -y

使用npm init -y 初始化一个package.json文件，自动填充默认配置项

2. webpack.config.js 配置webpack

• 配置项

  entry
  webpack 文件打包入口

  output
  webpack 打包完的文件输出到哪里

  loader
  webpack 资源处理

  plugins
  扩展webpack功能

  mode
  生产模式 production
  开发模式 development

• 默认格式

const path = require("path"); //处理路径问题
module.exports = {
	// 入口
	entry: './src/main.js',
	// 输出
	output: {
		// 文件路径
		path: path.resolve(__dirname, "dist"), // __dirname,当前文件的文件夹目录
		// 文件名
		filename: 'main.js'
	},
	// 加载器
	module:{
		rules:[
			// loader配置
		]
	},
	// 插件
	plugins:[
		// plugin配置
	],
	// 模式
	mode:"development"

• 加载器module

进行loader配置，将样式类型文件引入到入口文件

  module: {
        // loader配置
        rules: [{
            test: /\.(scss)$/,
            use: [
                {
                    loader: 'style-loader'//将js中css通过创建style标签添加html文件中生效
                },
                {
                    loader: 'css-loader'//将css资源编译成commonjs的模块到js中
                }, {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: () => [
                                require('autoprefixer')
                            ]
                        }
                    }
                }, {
                    loader: 'sass-loader'
                }
            ]
        }]
    }

图片处理

{
    test: /\.(png|jpe?g|gif|webp|svg)$/,
    type: "asset",
    parser: {
        dataUrlCondition: {
            // 小于10kb图片转换为base64
            // 优点 减少请求数量
            // 缺点 体积会更大
            maxSize: 10 * 1024
        }
    }
}

3. npx webpack 进行打包