webpack 打包好麻烦啊

概览

先贴官网
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

其他打包工具

1. sea.js
2. require.js
3. gulp
4. grunt

结构

入口 entry

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点

module.exports = {
  entry:'./src/index.js',
};

输出 output

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程

 output:{
        //__dirname 指当前目录 两个下划线
        //路径
        path:__dirname+'/dist',
        //打包好的js文件名称
        filename:'main.js'
    },

模式 mode 和 加载器 loader

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

 module:{
        rules: [
            { 'test': /\.css/, use:[ 'style-loader','css-loader'] },
            {
                "test":/\.(png|jpg|jpeg|svg|ico|bmp|gif|webp)/,
                use:[
                    {loader:"url-loader",options:{
                        name:"img/[name].[ext]",
                        // 如果小于10k转换为base64 代码格式
                        limit:10240,
                    }}
                ]

            }
        ],
    },

插件 plugins

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在 整个 编译生命周期都可以访问 compiler 对象。

//在webpackconfig.js
//wepack配置文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//省略以上结构
//创建
 plugins:[
        new HtmlWebpackPlugin({'template':'./public/index.html'})
    ],

本地服务器 devServer

webpack-dev-server 可用于快速开发应用程序

 devServer:{
        host:'localhost',
        port:8080,
        hot:true,
        open:true
    }