webpack

概念

webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。

安装与初始化

md mypack

cd mypack

npm init  -y

npm i webpack webpack-cli -D

使用配置文件 

入口：entry

module.exports={
    entry:'./index.js',
    // 指定文件的入口
    output:{
        filename:'main.js',
        // 定义文件名
        path:path.resolve(__dirname,'dist')
        // 定义文件夹 
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    }
    // 指定打包好的出口
}

模式：mode 

mode:'development', //开发模式

html-webpack-plugin 

 plugins:[
        new htmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]

webpack-dev-server

devServer: {
        host: 'localhost', //主机地址，默认是localhost
        port: '8080', //端口号，默认8080
        open: true, //自动打开页面
        hot:true,//热更新
    },

loader

处理非js文件

css-css-loader处理css文件

      -style-loader把css文件加载到style标签

图片/文件-file-loader处理文件

               -url-loader处理文件并把小图片转换为base64格式