一，本节课重点内容

本节课围绕webpack展开，重点内容可以分为以下几点:

webpack的历史与优势
webpack打包的核心流程
webpack打包的实操
Loader组件
Plugin插件
如何学好webpack

二，详细知识介绍

什么是前端项目？html,css,javascript,图片，音频，视频，图标......

随着项目越来越大，我们在做项目的时候，如果是小项目的话，我们可以手动的通过一些标签来维护。比如:

<script src=""></script>来引入js文件，或者是通过<link rel="stylesheet" type="text/css" href="style.css">来引入css文件。

但是这样会出现很多问题，比如我们项目，资源等等越来越大，越来越复杂，越来越臃肿的时候，我们手动维护的时候会随着依赖的js,css文件越来越多而导致越来越难以维护，越来越臃肿。而且当文件间有复杂的依赖关系的时候，比如js2依赖js1的时候，我们可能要先写js1,再写js2，不然就会出现未定义的问题。我们在引入js的依赖的时候，需要严格按照依赖的顺序来书写，就非常难以维护。还有，如果我们想要引入Less,Sass,Scss这些css预编译器的时候，会难以接入。最后，我们在开发的时候，可能也会出现JS,图片，资源模型不一致的问题。

由此引出webpack

webpack本质上是一种编译打包工具。可以打包多份文件。

webpack 在使用的时候可以创建一个前端工程，初始化之后，下载webpack，然后配置webpack.config.js配置文件!!我们通过entry来定义入口文件，通过output定义输出打包目录,通过mode决定开发环境和生产环境，因为我们webpack只认识js，所以我们在处理css,Less,Scss这些文件的时候要配置解析的rules属性，如果我们想要自动生产html文件，我们可以下载html-webpack-plugin，然后在配置文件中导入plugins。最后我们还可以设置服务的热更新，通过

devServer: {
        hot: true,
        open: true
    },

三，实践的例子


const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    output: {
        filename: "[name].js",
        path: path.join(__dirname,"./dist"),
    },
    mode:"development",
    devServer: {
        hot: true,
        open: true
    },
    plugins: [new HTMLWebpackPlugin()],
    // module: {
    //     rules:[{
    //         test: /\.less$/i,
    //         use: ['style-loader','css-loader','less-loader']
    //     }]
    // }
    module: {
        rules:[{
            test: /\.css$/,
            use: ['style-loader','css-loader']
        }]
    }
}

四，课后个人总结

这节课学到了很多webpack的知识，真的是收获非常非常非常非常大。

前端与webpack|青训营笔记

一，本节课重点内容

二，详细知识介绍

三，实践的例子

四，课后个人总结