webpack打包工具的使用

1. Node环境的安装

我使用的是win7系统，最新版本的Node.js 不支持win7，所以使用的版本为13.14.0。

2. webpack包的安装

之后使用命令npm install webpack即可安装。注意使用这种方式安装的包为全局安装，但是我们使用的时候，更多的是使用局部安装：

npm install webpack   #全局安装
npm install  webpack --save-dev   #局部安装，开发依赖

3. 创建目录并生成package.json文件

可以在scripts里面定义webpack的启动方式，相当于linux命令其别名，最后通过npm run 来执行，好处在于：1可以简化命令，2在执行npm rum xxx时，会优先使用局部安装的包。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

npm init -y

4. 创建webpack.config.js文件

写入一下内容：

const path=require('path')

module.export={
  entry:'./src/index.js',
  output:{
    filename:'main.js',
    path:path.resolve(__dirname,"dist")    //因为要使用绝对路径，调用了node的一个包，来根据相对路径生成绝对路径
  }

}

5. loader的使用

由于webpack本身并不支持css等文件打包处理，所以我们需要使用对应的loader来对webpack进行拓展，具体使用什么loader可以在使用的时候去查询：

https://webpack.docschina.org/loaders/