webpack打包工具

webpack： 打包模块化开发项目成为浏览器可执行文件。
webpack作为一个插件，可使用npm来安装，nodejs 自带npm，可前往nodejs官网下载安装（win7只能安装13.x 一下版本，14.x以上的版本要求win8以上的系统），nodejs 历史版本下载，下载对应版本的msi文件安装即可。

一、npm-v 查看npm 是否安装成功。

install ：插件安装命令

• install ：插件安装命令，简写为i
• -g ： 全局安装
• –save：运行时依赖
• -save-dev：开发时依赖
• @插件版本号：指定插件的版本号，不指定默认安装最新版
  webpack 只是在开发的需要打包的时候使用，可全局安装，也可在项目安装，故其安装命令（三选一）：
  npm install webpack@3.6.0 -g -save-dev //全局安装开发依赖的webpack
  npm install webpack@3.6.0 -g -save //全局安装运行依赖的webpack
  npm install webpack@3.6.0 -save //项目内安装运行依赖的webpack（需要先cd到项目根路径）

二、生成项目package.json 记录项目依赖的插件信息：cd 到项目路径，执行：npm init 命令

通过package.json文件的script部分，可以简化繁杂的命令

{
  "name": "exam",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "wp": "webpack ./src/main.js ./dist/bundle.js",  //如果未配置webpack.config.js的情况下，将main.js 打包成bundle.js
  },
  "author": "",
  "license": "ISC"
}

直接在终端输入： npm run wp 即可将main.js 打包成bundle.js

三、webpack.config.js 是 webpack 插件的配置信息，需要手动创建，该文件可以简化命令行操作，主要配置webpack的四大核心：entry(项目入口), output(输出路径) loaders(加载loader), and plugins(插件使用)

webpack.config.js

console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
module.exports = {
    entry : './src/main.js', // 入口文件，可使用相对路径
    output : {
        //__dirname，就是当前webpack.config.js文件所在的绝对路径
        path : __dirname + '/dist', //输出路径，要用绝对路径
        filename : 'bundle.js' //打包之后输出的文件名
    }
};

如果配置文件webpack.config.js被修改成别的名字(如webpack.dev.config.js)，执行webpack打包命令，是不能正常打包的(命令行会提示，找不到配置文件)，所以需要在打包的时候，通过–config指定配置文件的名字（webpack --config webpack.dev.config.js）才能正常打包

常用插件：

1. css-loader
2. style-loader
   //laoder 加载顺序从右到左，顺序错误可能导致不起效或报错
   //css-loader 负责加载css文件，style-loader 负责解析css文件到dom