webpack压缩

webpack静态模块打包器、编译、解析（模块安装后实现）

优点：

1、自带模块化（commonjs规范/require导入/module.exports={}导出）
2、自带基于node的服务器（webpack-dev-server）

一：安装

1、全局安装webpack

可以书写webpack命令

npm install webpack webpack-cli -g

2、项目安装webpack

进入项目所在文件夹下

npm install webpack webpack-cli -save-dev

3、查看webpack版本

webpack -v

4、创建package.json

npm init -y

5、配置打包目录

在项目目录下，新建config文件，用于存放配置文件；

src文件，用于存放源码；

dist文件，用于存放打包生成文件。

6、添加webpack.config.js文件

const path=require('path'); //调用node.js中的路径
module.exports={
    entry:{
        index:'./src/js/index.js' //需要打包的文件
    },
    output:{
        filename:'name.js',    //输入的文件名是什么，生成的文件名也是什么
        path:path.resolve(__dirname,'../out') //指定生成的文件目录
    },
    mode:"development"    //开发模式，没有对js等文件压缩，默认生成的是压缩文件
}

7、运行webpack

webpack
webpack --config config/webpack.config.js

8、配置package.json

每次输入命令webpack --config config/webpack.config.js，太长，且非常不方便，此时我们可以在package.json文件中配置，如下所示：

{
  "name": "TestWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config config/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
  }
}

npm run start