js-webpack自动化构建工具

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

　　四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

　　1.xxx版本只能加载js文件，其余加载js/json文件；其他格式需使用对应的loader进行转换或加载

###2、开启项目
  * 初始化项目：
      * 生成package.json文件
      * 
      ```   
      {
        "name": "webpack_test",
        "version": "1.0.0"
      } 
      ```
  * 安装webpack

　-  npm install webpack-cli -g //全局模式安装   webpack -h（4.0 需先配置config.js）
    - npm install webpack -g  //全局安装
    - npm install webpack --save-dev  //局部安装
###3、编译打包应用
  * 创建入口src/js/ : entry.js
    - document.write("entry.js is work");
  * 创建主页面: dist/index.html
    - <script type="text/javascript" src="bundle.js"></script>
  * 编译js
    - webpack src/js/entry.js dist/bundle.js

　　　　src/js/entry.js 源文件    dist/bundle.js 目标文件路径
  * 查看页面效果
###4、添加js/json文件
    * 创建第二个js: src/js/math.js
        ``` 
        export function square(x) {
          return x * x;
        }
        
        export function cube(x) {
          return x * x * x;
        }
        ```
    * 创建json文件: src/json/data.json
        ```
        {
          "name": "Tom",
          "age": 12
        }
        ```
    * 更新入口js : entry.js
        ```
        import {cube} from './math'
        import data from '../json/data.json'
        //注意data会自动被转换为原生的js对象或者数组
        document.write("entry.js is work <br/>");
        document.write(cube(2) + '<br/>');
        document.write(JSON.stringify(data) + '<br/>')
        ```
    * 编译js:
        ```
        webpack src/js/entry.js dist/bundle.js
        ```
    * 查看页面效果
###5、使用webpack配置文件
    * 创建webpack.config.js
        ```
        const path = require('path'); //path内置的模块，用来设置路径。
        
        module.exports = {

　　   mode: 'production',
          entry: './src/js/entry.js',   // 入口文件
          output: {                     // 输出配置
            filename: 'bundle.js',      // 输出文件名
            path: path.resolve(__dirname, 'dist')   //输出文件路径配置
          }
        };
        ```
    * 配置npm命令: package.json
        ```
        "scripts": {
          "build": "webpack"
        },
        ```
    * 打包应用
        ```
        npm run build
        ```
###6、打包css和图片文件
   * 安装样式的loader
    ```
    npm install css-loader style-loader --save-dev
    npm install file-loader url-loader --save-dev
    补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
    ```
  * 配置loader
    ```
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192       // 小于8kb的图片设为Base 64编码 打包到js模块中
              }
            }
          ]
        }
      ]
    }
    ```
  * 向应用中添加2张图片:
    * 小图: img/logo.png
    * 大图: img/big.jpg
    
  * 创建样式文件: src/css/test.css
    ```
    body {
      background: url('../img/logo.jpg')
    }
    ```
  * 更新入口js : entry.js
    - import '../css/test.css'
  * 添加css样式

#box1{
          width: 300px;
          height: 300px;
          background-image: url("../image/logo.jpg");
        }
        #box2{
          width: 300px;
          height: 300px;
          background-image: url("../image/big.jpg");
        }

* index.html添加元素
  
        <div id="box1"></div>
        <div id="box2"></div>
    
  * 执行打包命令：
    ```
    npm run build
    ```
  * 发现问题：
      * 大图无法打包到entry.js文件中，index.html不在生成资源目录下。
      * 页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到
      * 解决办法：
          * 使用publicPath : 'dist/js/' //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。
          * 将index.html放在dist/js/也可以解决。
###7、自动编译打包
    * 利用webpack开发服务器工具: webpack-dev-server
    * 下载
        - npm install --save-dev webpack-dev-server
    * webpack配置
          devServer: {
            contentBase: './dist'
          },
    * package配置
        - "start": "webpack-dev-server --open"
    * 编译打包应用并运行
        - npm start
###9、使用webpack插件
  * 常用的插件
    * 使用html-webpack-plugin根据模板html生成引入script的页面
    * 使用clean-webpack-plugin清除dist文件夹
    * 使用uglifyjs-webpack-plugin压缩打包的js文件
  * 下载
    ```
    npm install --save-dev  html-webpack-plugin clean-webpack-plugin
    ```
  * webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
        const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的文件   
        plugins: [
          new HtmlWebpackPlugin({template: './index.html'}),
          new CleanWebpackPlugin(['dist']),
        ]

* 创建页面: index.html

<!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>webpack test</title>
        </head>
        <body>
        <div id="app"></div>
        <!--打包文件将自动通过script标签注入到此处-->
        </body>
        </html>

* 打包运行项目
    ```
    npm run build
    npm start
    ```