webpack基本概念学习一

1.入口(entry)

入口指示 webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

<1> string--> './src/index.js' 单入口 打包形成一个chunk。输出一个bundle文件。 此时chunk的名称默认是main

<2> array -->['./src/index.js','./src/add.js'] 多入口 所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件 --> 只有在HMR功能中让html热更新生效～

<3> object 多入口 有几个入口文件就形成几个chunk，输出几个bundle文件 此时chunk的名称就是key

--> 特殊用法
{
    // 所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件。
    index：['./src/index.js','./src/count.js'],
    // 形成一个chunk，输出一个bundle文件
    add:'./src/add.js'
}

2. 输出(output)

输出指示 webpack 打包后的资源bundles输出到哪里去，以及如何命名。

<1>

3. loader

Loader 让webpack能够去处理那些非 JavaScript 文件（webpack 自身只能处理javaScript）

4.插件(plugins)

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

5.模式(module)

模块指示 webpack使用相应模式的配置。

1.webpack 打包样式资源+html资源

//  webpack.config.js webpack的配置文件
// 作用：指示webpack 干哪些活（当你运行webpack指令时，会加载里面的配置）

//  所有构建工具都是基于node js平台运行的～ 模块化默认采用common.js

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack 配置

    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'build.js',
        // 输出路径
        // __dirname nodejs 的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader的配置
    module: {
        rules: [
            // 详细loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // 创建style标签，将js中样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader'
                ]
            }, {
                test: /\.less$/,
                // 使用哪些loader进行处理
                use: [
                    // 创建style标签，将js中样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less 和less-loaders
                    'less-loader'
                ]
            }
        ]
    },

    // plugins 的配置
    plugins: [
        // 详细plugins的配置
        // html-webpack-plugin 默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
        new HtmlWebpackPlugin({
            //复制 ./src/index.html 文件 并自动引入打包输出的所有资源（js/css）
            template: './src/index.html'
        })


    ],

    // 模式
    mode: 'development', //开发模式
    // mode: 'production', //生产模式

}