webpack 默认配置和基础配置

刘嘿哈

发布于 2022-10-25 14:01:38

4380

发布于 2022-10-25 14:01:38

文章被收录于专栏：js笔记

image.png

Webpack 是⼀个现代 JavaScript 应⽤程序的静态模块打包器（module bundler），当 webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图(dependency graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或多个 bundle。 Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中是⼯程化、⾃动化思想在前端开发中的体现。

webpack基本上是0配置，但是不代表无配置，只是有了默认配置

根目录下创建webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    // 默认
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js'
    },
    // 以下是基本配置，webpack无默认配置
    mode: 'development',
    // 加载不同模块借助不同loader,webpack本身只能识别.js和.json文件
    // 其他后缀文件需要对应loader解析
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    // 功能扩展
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html'
    })]
}