webpack 默认配置和基础配置

image.png

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

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

根目录下创建webpack.config.js

代码语言：javascript复制

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'
    })]
}

image.png

webpack javascript 网站 编程算法 打包

0 人点赞