【webpack】打包工具的功能原理

不会就问就查询！科技利民，学海无涯²！

《知识补充》

是JavaScript应用的静态模块打包工具；模块和打包。

模块化：JS文件、css、图片、json文件等在webpack中被当做模块来使用；
打包：将各种资源模块进行打包合并成一个或多个包（bundle）；而且还能对资源进行处理：压缩图片、scss转css、es6转es5语法、ts转js；

---

和grunt/gulp：

• grunt/gulp更加强调前端流程的自动化，模块化不是核心；
• webpack更强调模块化开发管理，而文件压缩合并、预处理等功能，是他的附带功能；

---

总结：

• 前端模块化–需要webpack；
• webpack的工作需要node环境；
• node的资源需要npm工具管理；

---

《webpack3.0》

一、webpack相关

1、先安装node.js；
使用node.js的npm下载webpack；
npm install webpack@3.6.0 --g：全局安装
webpack -version：全局安装命令，查看版本号，是否安装成功；

2、文件介绍
dist文件夹：打包后的代码
src文件夹：开发代码，采用模块化开发；
index.html主页面
src-main.js：打包入口文件
dist-bundle.js：打包后的js，用于被页面引入

3、局部安装webpack

• 初始化node环境：npm init，再局部安装webpack；
• 为了确保项目以后使用的webpack版本与项目被来回转移、发布到服务器上版本一致，一般在项目中下载自身的webpack，就是局部安装，在node.js中使用webpack会优先调用局部webpack（如配置快捷打包npm run build）；
• npm install webpack@3.6.0 --save-dev：局部安装，开发时依赖（项目打包后不需要）；
  此时会在package.json中开发依赖出现，进行了管理；在项目目录中生成“node_modules”文件夹；
• node.js配置webpack：
  • 当需要设置默认打包哪个入口JS，打包到哪个JS时，即入口、出口；出口的配置需要绝对路径，要借助nodejs的path模块，所以需要在项目中初始化nodejs；
  • nodejs初始化完了也配置了（package.json文件）、webpack局部安装完了（node_modules文件夹），新建webpack.config,js，进行配置；

package.json:
  "scripts": {
    "build":"webpack"
  },
webpack.config.js:
const path = require('path');
module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  }
}

配置前打包方式：
[项目路径]>webpack ./src/main.js ./dist/bundle.js
配置后：
>npm run build
:这里就是相当于执行:webpack;但优先用局部webpack；直接用webpack命令会找全局的。

4、模块化写JS文件可以在直接写；但css、图片、es6等处理，需要加载loader协助webpack；

• 使用npm安装所需loader到开发依赖即可；
• 在webpack中配置使用loader，webpack.config.js；
• 在main.js入口文件中引入css等文件，才能打包进bundle.js供主页面使用；require（'./css/normal.css'）

5、webpack.config.js 配置文件的使用

• 配置webpack的五大核心：入口(entry)、出口(output)、转换器(loader)、插件(plugins)、模式(mode)；

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  // 配置默认入口
  entry:'./src/main.js',
  // 配置默认出口
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  // 对已有添加便利的解决方案
  resolve:{
    extensions:['.js','.css','.vue'],
    alias: {
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  // 第三方加载模块的使用规则
  module: {
    rules:[
      {
        test:/\.vue$/,
        use:['vue-loader']
      },
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  // 对现有功能进行扩展的插件
  plugins:[
    new webpack.BannerPlugin('最终版权归webpack所有'),
    new HtmlWebpackPlugin({template:'./index.html'}),
    new UglifyjsWebpackPlugin()
  ]
}

• 常见插件：（第一步，下载到开发依赖；第二步，配置；）
  • html-webpack-plugin：将index.html主页面也打包到dist文件夹中并自动引入打包后的JS文件；
  • uglifyjs-webpack-plugin：（一般在打包上线时才有，开发阶段不用）js丑化，压缩打包后的bundle.js文件，注释会被清除（测试与版权声明插件连用没有清除声明的注释）；

二、测试使用的本地服务器（打包上线的项目就不需要这些代码了，ctrl+c关闭服务）

1、用webpack打包代码去浏览器查看结果，每次修改都要重新打包，费时间；所以有了本地服务器，可以让浏览器自动刷新修改的结果，但是这种刷新不是真正在磁盘中修改打包后的文件，而是通过内存模拟修改后的结果，让代码可以实现“只需最后打包一次”的效果。

2、本地服务器：基于nodejs搭建的，使用了express框架；

3、我们要使用只需要安装相应模块，npm install webpack-dev-server@版本号 --save-dev；此时是局部（本地）安装，不写版本号就是最新，一般写上为了和webpack版本对应，以免版本差别导致不好配合；

4、安装完也需要在webpack.config.js中配置；

5、同样，也可以在package.json配置本地启动的快捷键：npm run dev；因为不是全局安装的，不能直接使用webpack-dev-server执行，可以使用路径指定在.bin文件夹中的；或者使用npm命令：npm run dev；

三、webpack配置文件的分离( 对开发人员友好 )

1、在开发过程中有些配置只在开发时使用，项目上线时就不需要了，为了防止到时候不好找哪些需要删除，所以要将开发时与上线时的配置分开；

2、思想：将webpack.config.js换成：base.config.js（通用的、都需要的）、prod.config.js（生产时：如JS丑化）、dev.config.js（开发时：如本地服务器）三个文件，让base+pord、base+dev结合，就是使用插件webpack-merge进行两两合并；最后让npm run build、npm run dev分别与之对应；

3、总体两步，

• 第一步：prod/dev.config.js通过引入webpack-merge与base.config.js合并，将分离好的配置文件合并；

>npm install webpack-merge --save-dev

prod.config.js：

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

const config = webpackMerge(baseConfig,{
  // 对现有功能进行扩展的插件
  plugins:[
    new UglifyjsWebpackPlugin()
  ]
});
module.exports = config;

dev.config.js：

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

const config = webpackMerge(baseConfig,{
  devServer:{
    contentBase:'./dist',
    inline:true
  }
});
module.exports = config;

• 第二步：package.json中配置，不同命令参照不同的webpack合并好的配置文件；
  package.json：

"scripts": {
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --config ./build/dev.config.js"
  },