webpack简介及常用配置

webpack

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

可以把es6模块化编译为浏览器可识别的模块化
能够处理js，json资源，但是不能处理css，html，img等资源

loader

loader 用于对模块的源代码进行转换，提供webpack不支持的模块的处理方式

webpack自身能够处理js，json资源，但是不能处理css，img等资源，我们可以在loader中配置怎样处理css等资源。
如：css，sass，img，typescript等

在使用前利用提供的规则先解析在使用，解析时从下到上，从右到左

plugins

有些比较负责的内容，使用loader还是无法处理，所以需要在plugins配置，如：html等

常用配置

//webpack.conf.js常用配置模板
const {resolve} = require(path)     //node.js中模块，用来拼接绝对路径的方法

module.export = {
    entry: './index.js',       //入口文件
    output: {
        filename: 'build.js',     //输出文件名
        path: resolve(__dirname, 'build')  //输出路径（必须是绝对路径，__dirname是node.js的变量名，代表当前文件的绝对路径）
    },
    module: {
        rules: [            //loader、解析器等选项的配置（使用时需1.下载 2.配置）
            {   //处理css
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']    //使用多个loader用use
            },
            {   //处理图片
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',  //使用一个loader  file-loader也可加载图片，但不优化
                options:{
                    //图片大小小于8kb就会使用base64处理
                    //优点：减少http请求（减少服务器压力）
                    //缺点：图片体积会更大（加载慢）
                    limit: 8*1024,
                    //因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonJs方式，解析时会出问题【object module】
                    //所以关闭es6模块化，使用commonjs解析
                    esModule: false,
                    name: '[hash:10].[ext]' //文件重命名 取hash的前10位
                }
            },
            {   //处理字体
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                  'file-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader',  //处理html文件的img图片（负责引入img，使其能被url-loader处理）
            }
        ]
    },
    plugins: {              //插件的配置（使用时需1.下载 2.引用 3.配置）
        //html-webpack-plugins  
        //功能：默认会创建一个空的html，自动引入打包输出的所有资源js、css
        //需求：需要一个有结构的html文件
        new HtmlWebpackPlugins({
            template: './index.html'  //自动复制该html的内容，并引入打包好的js、css（WebpackManifestPlugin 可以追踪所有的输出映射，过程）
        })
    },
    mode: 'development',      //开发模式配置（"production" | "development" | "none"），生产环境会增加压缩和优化
    devtool: 'inline-source-map',  //开发环境使用（帮助调试，可显示错误的文件和行数）
    devServer: {        //开发服务器配置，可用来自动化:自动编译,自动打开浏览器，自动刷新浏览器等等(只会在内存中编译，不会有任何输，出启动指令  webpack-dev-server)
        contentBase: resolve(__dirname,'build'),    //编译缓存在哪个文件
        compress: true,     //启动gzip压缩
        port:8080,          //端口号
        open: true,         //自动打开浏览器
        proxy: {
          '/bx':{           //代理前缀
              target: '代理地址',
              changeOrigin:true,    //表示是否跨域，
              pathRewrite:{           //表示需要rewrite重写的
                '^/bx': ''
              }
          }
        }
    }
}