[webpack]简单复习一下构建工具

---

一年半前，才听说前端这个词，开始有的没的学，那时候webpack和gulp算是最火的前端构建工具，当然不能落下。后来，知道一些后缀带cli，俗称脚手架的东西，webpack又全还给书了。

1、简单实现font，img，css，以及js打包
2、使用devServer开启本地服务器进行调试

先看图

webpack.png

👆一个基本的webpack.config.js差不多就出来了

1、entry

entry:'./src/app.js',

👆入口的js，没什么好说的

2、output

output:{
        filename:'js/app.js', //'打包后js    位置/名字
        path:path.resolve(__dirname,'dist'), //所有loader打包后的位置
        publicPath:''//为打包后链接再index.html加路径
    }

👆打包后的文件名和位置

3、mode

mode:'development'

👆webpack4的新属性，默认会混合打包后的app.js，使用开发模式避免混合

4、plugins

plugins:[
    new HtmlWebpackPlugin({//将html打包过去
        template:'src/index.html',
        filename:'index.html'
    }),
    new ExtractTextPlugin ('css/[name]_[hash:6].css'),//将css从js抽离
    new cleanWebpackPlugin(['dist'])//每次构建进行删除上传生成的dist
],

👆webpack可以使用的插件很多，根据需求来安装

5、module

module:{
        rules:[
            {
                test:/\.js$/,//'通过正则找到js文件
                use:[{
                    loader:'babel-loader'
                }],
                exclude:[//排除一些不需要loader的文件
                    path.resolve(__dirname,'node_modules'),
                ]
            },
        ]
    }

👆js、css、img、font、stylus、一共5个rule，大致都是这种写法

6、devServer

devServer:{
        port:'9000',
    }

👆一个很强大很爽的插件(需要安装webpack-dev-server)，可以本地开启虚拟服务器，热更新，代理服务器，大大提升开发爽度。

---

• 一般来讲webpack分开发环境和生产环境，后面还要继续研究

（BTW:想想一年前，很多东西webpack还不能单独完成所有工作，现在一个webpack已经完全承保所有构建工作）