1.webpack 简介
    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
2.webpack 使用步骤
    2.1 全局安装webpack
    打开命令窗口，执行以下命令；
    npm install webpack -g
    2.2 新建一个webpack项目
    进入此项目内，执行初始化命令
    npm init -y;
    会在此项目内生成package.json文件；
    2.3 安装项目依赖
    npm install webpack --save-dev
    注意：4.x版本需要全局安装webpack-cli

    2.3  在项目根目录下新建hello.js文件

    2.4 配置模式
        执行命令webpack hello.js bundle.js
        执行后发现会报错
        报错信息：
            WARNING in configuration
             The 'mode' option has not been set. Set  'mode' option to 'development' or 'production' to enable defaults for this enviroment.
             ERROR in multi ./hello.js bundle.js
             Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用户名/Desktop/webpack-test'
             @ multi ./hello.js bundle.js
        翻译成中文：
        配置警告：“mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。
        multi错误 ./ hello.js bundle.js
        未发现模块：错误：无法解析’C:/Users/你的用户名/Desktop/webpack-test’中的bundle.js
        @ multi ./hello.js bundle.js


        这里提示我们存在的第一个问题是没有配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：

        webpack --mode development
        我们看到进行了打包并显示了Hash、Version、Time、Build at信息，表明已经可以打包。不过，仍然有错误提示：

        ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Users/你的用户名/Desktop/webpack-test

        翻译成中文：

        未找到入口模块发生错误：错误：无法解析’C:/Users/你的用户名/Desktop/webpack-test’中的’./src’


    2.5 创建入口文件
    webpack4.x是以项目根目录下的'./src'作为入口，但我们的项目中缺乏该路径，因此我们在根目录下创建src文件夹，事实上webpack4.x以'./src/index.js'作为入口，单单创建src文件而没有index.js文件仍然会报错，因此我们
    将hello.js移动到'./src'，并重命名为index.js。
    现在如果我们再次执行、
    webpack index.js bundle.js
    会提示can.t resolve相关的错误。
    原因是，webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。
    因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行
    webpack --mode development
    或者
    webpack --mode production。
    这样便能够实现将'./src/index.js'打包成'./dist/main.js'。
    不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：
    "dev":"webpack --mode development",
    "build":"webpack --mode production"
    以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。
    我们在根目录执行：

    npm run dev
    可以看到根目录下生成了dist目录，并且dist目录下生成了main.js文件，main.js文件已经打包了src目录下index.js文件的代码。


3.webpack对css文件打包时的处理方法
    在根目录下创建style.css文件；
    webpack天生不支持对css文件打包，处理css文件时需要依赖css-loader和style-loader,因此需要在项目中安装css-loader和style-loader依赖；
    通过在命令行执行以下命令来完成
    npm install caa-loader style-loader --save

    在hello.js中引入
    require('style-loader!css-loader!./style.css');
    再次执行webpack hello.js完成打包

4.配置其他参数
    我们如果需要配置webpack指令的其他参数，只需要在webpack –mode production/development后加上其他参数即可，如：
    webpack --mode development --watch --progress --display-modules --colors --display-reasons
    当然，这也可以写入package.json的scripts之中。


5.总结
    我们可以将以上探索进行整理总结，首先是注意事项：
    1、webpack-cli必须要全局安装，否则不能使用webpack指令；
    2、webpack也必须要全局安装，否则也不能使用webpack指令。
    3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
    4、默认入口文件是./src/index.js，默认输出文件./dist/main.js。

    配置步骤：

    1、创建工程目录；
    2、初始化工程目录：npm init。
    3、全局安装webpack-cli。
    4、全局安装webpack。
    5、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。
    6、在webpack –mode development/production可串联设置其他参数。