webpack--一个用于现代javascript应用程序的静态模块打包工具

1.为何要使用webpack

        1）解耦需要：使用SPA（Single-page Application，单页面应用）开发大型项目时，解决模块之间的解耦和维护问题；

        2）前端工程化需要：前端开发逐渐向工程化演进，理解前端框架的项目构建的流程（很多框架使用脚手架搭建项目都是基于webpack）

        3)项目扩展需要：理解Webpack核心概念（如Babel加载器、Plugin插件），便于项目协同开发与项目整合。

2.webpack和gulp的区别

        gulp也可以做项目打包工作，但是gulp本身不具备编译功能，要基于许多依赖才可以完成打包工作，而gulp只是对这些依赖进行管理，所以是流程管理工具。webpack本身具备编译功能，所以是编译工具，但是只能识别javascript和json文件，欲处理其他类型文件，需要下载loader

3.webpack的几个核心概念

        1）入口（entry),告诉webpack从哪个文件开始编译，默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

        2）输出 (output) 编译好的文件放在哪个位置。一般是 dist/main.js

        3）加载器(loader)，webpack本身只能识别javascript和json文件，loader可以让weback去处理其他类型文件

        4）插件（plugin）给webpack提供更强大的功能

5.使用

        1.在项目内使用webpack编译，在开发环境下安装webpack 和 webpack-cli

cnpm install webpack webpack-cli --save-dev

        2.检测版本,正确显示版本号则说明安装成功(如果报错webpack不是外部或者内部命令，就去全局安装一下webpack 和 webpack-cli)

webpack --version

        3.在项目根目录下新建文件   webpack.config.js, 配置信息

        注意：加载器和插件都需要先安装，而且插件需要导入到配置文件

                3-1.处理.jsx文件               

cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D

                3-2.css加载器                 

cnpm i css-loader style-loader -D

                3-3html插件      

cnpm i html-webpack-plugin -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {

    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    //处理不同类型文件就先去下载对应的加载器
    
    module: {
        rules: [
            {
                test: /\.css$/,
			    use:['style-loader','css-loader']
            },
            {
                test: /\.jsx?$/, // jsx/js文件的正则
				exclude: /node_modules/, // 排除 node_modules 文件夹
				use:{
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
            
        ]
                         
    },
    plugins: [
        //这个插件作用是把js文件导入到html文件里
         new HtmlWebpackPlugin({
            //项目基于的模板
            template: 'public/index.html',
            //编译后的html文件名
            filename: 'index.html',
            //把js文件导入到html文件的什么位置
            inject: 'body'
        })
    ]
}