最近开始学习webpack，简单来说，webpack是一个打包工具。

webpack分为5大部分：

1.entry ，入口，简而言之，这是配置您的项目的打包入口的

2.output，这是配置打包的输出路径的

3.module，里面配置一些loader，比如css-loader,因为webpack只能识别js跟JSON

4.plugins，里面配置一些插件,比如HtmlWebpackPlugin,扩展项目的功能

5.mode,设置模式

实操记录：

1.在系统新建一个文件夹，然后用VSCODE打开项目

2.然后打开终端，输入npm init，因为webpack是基于node的，所以还没安装的话可以百度一下，傻瓜式操作，比较简单

3.npm init 之后会生成一个package.json，关于node的配置以及安装的包都在这里了

4.需要安装webpack  webpack-cli.;npm i webpack webpack-cli -D 

5.在package.json下新建一个webpack.config.js,这里就可以配置我刚刚列的5个要素了

6.命令 webpack --config  webpack.config.js   即可运行

下面贴上基本的一个配置范例

const minicss = require('mini-css-extract-plugin')
const HtmlwebpackPlugin = require('html-webpack-plugin')
const happypack = require('happypack')
const optcss = require('optimize-css-assets-webpack-plugin')
const path = require('path')
process.env.NODE_ENV = 'production'
module.exports={
    entry:"./src/index.js",
    output:{
        filename:'built.js',
        path:__dirname + "/build"

    },
    module:{
            rules:[
                {
                oneOf:[

                    {
                        test:/\.js$/,
                        use:[
                            'happypack/loader?id=babel',
                            {
                                loader:"thread-loader",
                                options:{
                                    workers:3
                                }
                            }
                        ],
                        include:['/src/'],
                        exclude:"/node_modules/"

                },
                {
                    test:/\.css$/,
                    use:[
                        minicss.loader,
                        'css-loader',
                        {
                            loader:"thread-loader",
                            options:{
                                workers:3
                            }
                        }
                    ]
                },
                {
                    test:/\.less$/,
                    use:[
                        minicss.loader,
                        'css-loader',
                        'less-loader'
                    ]
                }
            ]
         
        }
    ]
    },
    plugins:[
        new minicss({
            filename:'../src/static/css/test.css'
        }),
        new HtmlwebpackPlugin({
            template:'./index.html',
            minify:{
                collapseInlineTagWhitespace:true,
                removeComments:true
            }
        }),
        new optcss(),
        new happypack({
            id:"babel",
            loaders:['babel-loader?cacheDirectory'],
            threads:5
        }
    )
    ],
    mode:"development",
    devServer:{
        port:3000,
        compress:true,
        hot:true
    },
    // 开发环境
    devtool:'inline-source-map'
    // 生产环境,调试方便或者速度
    // hidden-sourec-map 隐藏源码
    // devtool:'source-map'/cheap-module-source-map
    
}

　　这是这两天的收获，好好学习，天天向上。一切付出都会有收获