webpack.config.js的基本配置

一.webpack的五个核心概念

1.Entry
入口(Entry)指示webpack以那个文件为入口起点开始打包，分析构建内部依赖图

2.Output
输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何命名

3.Loader
Loader让webpack能够去处理哪些非JavaScript文件(webpack自身只理解JavaScript)

4.Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等

5.Mode
模式，选择什么开发环境             development:开发环境      production:生产环境

生产环境比开发环境多一个压缩js代码

2.webpack.config.js的基本配置

const { resolve } = require('path');
/* loader:1.下载 2.使用
     Plugins：1.下载 2.引入 3.使用*/
const HtmlWbpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack 配置
    // 入口起点  以那个文件为入口起点开始打包
    entry:'./src/index.js',
    // 输出   打包后在哪里输出
    output:{
        // 打包输出的文件名
        filename:'built.js',
        /* 输出路径   __dirname代表 node.js的变量，代表存放当前文件的文件夹的绝对路径
        build代表在哪个文件夹，意思是项目下的build文件夹下输出*/
        path:resolve(__dirname,'build')
    },
    // loader的配置  处理哪些非JavaScript文件(webpack自身只理解JavaScript)
    module:{
        rules:[
             // 详细loader配置
             {
                //正则表达式  匹配哪些文件 匹配后缀为css的文件
                test:/\.css$/,
                // 使用哪些loader进行处理
                use:[
                    // 创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            }
        ]
    },
    // plugins的配置
    Plugins:[
        // 详细插件配置
        new HtmlWbpackPlugin({
            template:'./src/index.html'
        })
    ],
    // 模式  development:开发环境   production:生产环境
    mode:'development'
}

 在终端写入webpack就会开始打包。