webpack的基本配置

一、安装webpack

全局安装命令

#全局新版本webpak与webpack脚手架安装
$ npm install -g webpack 
$ npm install -g webpack-cli

#开发环境下安装
$ npm install webpack -s -d 
$ npm install webpack-cli -s -d

#安装指定版本
$ npm intall -g webpack@3.6.0

#版本查看
$ webpack -v
$ webpack --version

二、创建目录

按照下面的结构创建文件及文件夹
- dist:用于存放打包后的文件
- src：存放源码
- index：定义一个页面入口
运行打包命令
```
# 旧版本打包命令
$ webpack ./src/mian.js ./dist/mian.js

#新版本打包命令
$  webpack ./src/main.js -o ./dist/main
```
- 旧版本需要制定到打包后的文件名，新版本只要制定到目录即可，下面新版本的命令会在dist/main/下创建一个原名js文件。
- 第一个参数代表入口，第二个参数代表出口

三、配置webpack

如果每次更改代码查看效果都要执行一遍上面的代码太麻烦了，所以我们需要进行配置：

创建文件webpack.config.js，名称是固定的，不能改变，先来做一下最简单的入、出口配置

// 引入path
// 如果不引入path会报路径不是绝对路径的错误
const path = require('path');

module.exports = {
    // 打包的入口
    entry:'./src/main.js',
    // 打包的出口
    output:{
        // 出口文件的路径
        path:'./dist',
        // 出口文件的名称
        filename:'bundle.js'
    },
}
//---------------------引入path包之后，下面的路径代码需要修改----------------------------
// 引入path
// 如果不引入path会报路径不是绝对路径的错误
const path = require('path');

module.exports = {
    // 打包的入口
    entry:'./src/main.js',
    // 打包的出口
    output:{
        // 出口文件的路径
        path:path.resolve(__dirname,'dist'),
        // 出口文件的名称
        filename:'bundle.js'
    },
}

引入了path之后，我们使用path.resolve(__dirname,'目录名')来进行配置目录，因为这里webpack需要设置绝对路径，但是我们如果只写绝对路径，项目移动的时候就很容易报错，所以path的__dirname就是动态获取绝对路径用的

当我们配置好出口入口之后，我们再打包就只需要在终端输入命令webpack即可，不需要每次都单独指定出口入口：

下面我们需要对项目进行初始化：

输入初始化命令

$ npm init

初始化命令最好是在创建项目一开始就进行的，前面的操作是为了先体验一下webpack。

# 项目名称
package name: (my-webpack)
# 版本号
version: (1.0.0)
# 项目描述
description:
# 入口点 
entry point: (webpack.config.js) main.js
# 单元测试  一般不需要
test command:
# git仓库
git repository:
# 关键字
keywords:
# 作者
author:
# 开源许可
license: (ISC)
# 生成的package.json的预览
About to write to D:\Project\frontEnd\my-webpack\package.json:
# 下面显示的内容就是最后生成在package.json文件中的内容
{...}
# 是否确定
Is this OK? (yes)

上面的选项选好了之后，我们的项目就初始化完成了

生成的package.json是对项目的基本描述

最终我在package.json中生成的文件内容为：

{
  "name": "my-webpack",
  "version": "1.0.0",
  "description": "my_webpack",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zhiguo.Hong",
  "license": "ISC",
  "keywords": [
    "webpack"
  ]
}

三、配置脚本：

在package.json中在script这个对象中,进行脚本配置

我们配置脚本的目的是为了，防止配置文件更名，比如webpack.config.js改为其他名字之后，我们在终端再使用webpack命令将没有效果。
下面先配置最基本的build打包命令：
```
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  }
```
在package.json文件中如上配置build命令。
在package.json中配置的脚本，在终端使用npm run 脚本命令就会自动运行脚本命令中配置的命令

eg:
```
PS D:\Project\frontEnd\my-webpack> npm run build
Debugger attached.

> my-webpack@1.0.0 build D:\Project\frontEnd\my-webpack
> webpack
```
输入npm run build就会起到输入webpack的作用；

其他脚本配置也是如此；

当我们配置了脚本之后，使用脚本命令执行的时候，就会优先选择局部环境内的包执行。

四、安装包

所有在终端运行的命令，都是全局的，会先在全局去查找这个命令（即：我如果在全局也安装了webpack在项目局部也安装了webpack，即使你在项目的目录下的终端去运行webpack，也是使用的全局下的webpack）。

但是有些包我们并不希望全局使用，而且有些包我们只需要在开发模式下使用，或者我们在全局下安装的版本比较高，想使用局部下的低版本，我们就需要配置一下。

现在局部安装一下webpack

在终端输入命令：npm install webpack@3.6.0 -save-dev，命令也可以简写为npm i webpack@3.6.0 -s -d
- 开发依赖（devdependencies）：在开发时需要用的到依赖，会将包信息保存在package.json的devdependencies中，在项目部署之后，这部分的依赖不会被部署
- 生产依赖(dependencies)：生产环境下的依赖，在项目部署之后会跟随部署的依赖信息会保存在package.json的dependencies中
  
  上面所描述的package.json中的devdependencies与dependencies只在node原生项目中不可更改，因为vue/react等其他框架，最终打包出来的还是静态的文件，所以在脚手架环境下，你的开发依赖和生产依赖理论上想放哪就放哪。
npm安装参数
- npm install modulesName
  
  将包安装在node_module文件夹下,但是不会记录在pakage.json的dependencies或devdependencies节点下。如果你转发项目的时候，没有带着这样的包一起发过去，对方在使用npm install命令安装之后，运行项目，可能会报找不到某个包
- npm i modulesName -g/npm install modulesName --global
  
  全局安装包，不会记录在package.json
- npm i modulesName@version
  
  指定版本安装@后面填写版本号，npm默认会以你写入的版本号去npm中匹配，所以最终安装的版本可能不是你所写的版本，以你填入的版本号开头的版本进行安装，具体版本查看参考第五节
- npm i modulesName@version -S-E/npm i modulesName@version --save-exact
  
  表示我指定的版本就是精确版本，建议先查看一下版本之后，选定版本在使用这个命令。
  
  **注意：**参数顺序不能反，否则包不会写入package.json.
- npm i modulesName -S/npm i modulesName --save
  
  将包安装在生产者环境下（dependencies）
  
  注意:-S大写，小写不会被识别，将于不添加参数相同！！！！
- npm i modulesName --save-dev/npm i modulesName -D
  
  将包安装在开发者环境下（devdependencies）
  
  这里的--save-dev不能省略为-S-D，会被当成生产依赖（-D-S就是开发依赖，决定于谁在前面）更不能省略成-s-d，相当于没添加参数，不会被记录到package.json
  剩下还有两个命令,我也没怎么用过，直接贴上，感兴趣的自己查询一下吧。
  - -B --save-bundle缩写为-B，表示将安装的包将写入packege.json里面的bundleDependencies。
  - -O --save-optional缩写为-O，表示将安装的包将写入packege.json里面的optionalDependencies。

五、版本号的查看和版本号含义

npm查看版本号命令：

npm view packageName versions如npm view express versions查看结果如下：

版本号含义：
- Alpha：Alpha是内部测试版,一般不向外部发布,会有很多Bug.除非你也是测试人员,否则不建议使用.是希腊字母的第一位,表示最初级的版本，alpha 就是α，beta 就是β ，alpha 版就是比
- Beta：该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一缺陷，需要经过多次测试来进一步消除。这个阶段的版本会一直加入新的功能。
- RC(Release Candidate)：候选版本。Release.Candidate.就是发行候选版本。和Beta版最大的差别在于Beta阶段会一直加入新的功能，但是到了RC版本，几乎就不会加入新的功能了，而主要着重于除错! RC版本是最终发放给用户的最接近正式版的版本，发行后改正bug就是正式版了，就是正式版之前的最后一个测试版。
- GA（general availability）：GA意味着General Availability，也就是官方开始推荐广泛使用了。
- Release：该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号(R)。

六、处理css文件

因为webpack默认只支持打包js文件，所以当我们项目中含有其他的文件的时候，webpack就不能帮我们完成打包任务了甚至还会报错，所以我们需要借助其他的loader来实现我们的想法：

安装配置css-loader:

npm i css-loader -D;

在webpack.config.js中引入下面的设置：

    module: {
        rules: [{
            // 正则匹配以.css结尾的文件
            test: /\.css$/,
            // style-loader将模块导出作为样式添加到Dom中
            // css-loader只负责将css文件进行加载
            use: ['style-loader', 'css-loader']
        }]
    }

因为webpack解读包的顺序是从后向前，从右向左，所以style-loader与css-loader的顺序是不能改变的。

如果你安装的webpack版本较低，安装新的loader的时候会报错，需要安装相对低版本的loader。

在src文件夹中创建一个css文件，然后随意写一点测试css，如图，是我的目录结构和内容。

然后我们需要在入口文件（main.js）中引入一下模块
```
// 引入css模块
require('./css/normal.css')
```
然后我们再运行npm run build,进行打包，发现我们写的css已经可以在使用了
下面说一下多个包怎么配置，下面就在安装一个sass-loader,命令因为在webpack官网或者webpack中文网都找得到。
配置：

在rules中添加一个对象进行配置

当我们使用图片或者文件的loader的时候，打包的时候，会给我们的文件重新命名这时候我们就要在配置文件中添加一个路径的配置：

    output: {
        // 出口文件的路径
        path: path.resolve(__dirname, 'dist'),
        // 出口文件的名称
        filename: 'bundle.js',
        // 配置路径
        publicPath: "./dist/"

    },

webpack基础

webpack的基本配置

一、 安装webpack

二、创建目录

三、配置脚本：

四、 安装包

五、版本号的查看和版本号含义

六、 处理css文件

一、安装webpack

四、安装包

六、处理css文件