《webpack的打包开发》

一张图来表示小编对于webpack的认知：

同时也在实战中对于webpack进行了验证：

/*
 * @Descripttion: 
 * @version: v1.0
 * @Author: linda
 * @Date: 2020-03-10 17:31:43
 * @LastEditors: linda
 * @LastEditTime: 2020-03-10 22:05:29
 */
const path = require('path'); //node自带的路径模块
// 此插件的导入使得单页应用成为现实，也体现了自动化
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 全局导出，让所有的文件都能访问到当前的配置信息
module.exports = {
  // 设置环境:开发-devlopment；生产-production
  // 在dev下，打包后的代码格式化，方便阅读和调试
  // 在prod下，打包后的代码简化，不易阅读
  mode: 'development',
  // 入口文件(要打包的文件信息) string array object
  // entry: './index.js', //string
  // entry: ['./app/common.js', './app/index.js', './app/list.js'], //array
  entry: {
    common: './app/common.js',
    index: ['./app/index.js', './app/list.js']
  },
  // 出口文件（要输出打包的文件信息）
  output: {
    /*
     *output.path为absolute path
     *webpack设计的人性化
     *如果为相对路径，在一个项目中可能会面临：
     *path: './1/2/3/4/dist'
     *自动化找到输出文件路径，引入node自带的路径模块
     *const path = require('path');
     */
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  // 插件-在打包后的文件中包含html文件，单页应用中的单页
  plugins: [
    // public中有两个单页模板，那用哪个呢？用template来进行设置
    new HtmlWebpackPlugin({
      // 如果要使用title改变项目名称
      // 第一，在webpack.config.js中设置修改后的
      // 第二，要在首页模板中
      title: '项目名称改变',
      template: './public/index.html',
      // filename可以修改首页文件名称
      filename: 'app.html',
      // inject决定js资源存放的位置是在body还是在head，默认是存放在body中的
      // 类型为boolean或者string
      // string: 'body' || ''head
      // 如果为false，则在html中不引入js资源
      inject: true,
      minify: {
        collapseWhitespace: true
      },
      // hash默认为false，为true时，打包后的js文件名称用hash值表示，进行缓存，提高效率
      hash: true,
      // chunks是选择加载entry入口文件
      chunks: [index],
      // excludeChunks选择不加载entry入口的某些文件
      excludeChunks: [common]
    })
  ]
}

•  插件html-webpack-plugin使得工程自动化，同时也是实现单页应用的重要插件~
• title能改变项目的名称，要想实现此效果，需要两步配置：

1. webpack.config.js---title: ''
2. index.html---<title><%= htmlWebpackPlugin.options.title %></title>

• npm run build构建打包除了相应的基础设置外，还需要在package.json中配置 

{
  "name": "webpack-play",
  "version": "1.0.0",
  "description": "this is a demo of webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"  //npm run build
  },
  "author": "linda",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}