webpack的各种安装和配置

1、什么是 webpack？

概念：webpack（module bundler）是一个模块加载器兼打包工具，它能把各种资源，例如 JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。
目的：有依赖关系的各种文件打包成一系列的静态资源。
前端模块化：
1. 模块化的规范：ES6、CommonJS、CMD、AMD
2. webpack可以处理模块间的依赖关系。
打包：
1. 把webpack中的各种资源进行打包合并成一个或者多个包（Bundle）。
2. 并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。
和grunt/gulp的对比
1. 没有用到模块化的时候才用grunt/gulp
2. grunt/gulp更加强调前端流程的自动化
3. webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，只是附加功能。
webpack为了正常运行，必须依赖node环境。而node环境为了可以正常运行很多代码，必须包含各种依赖的包。npm（node package manager）为了管理node上的各种包。

2、webpack安装

下载node，如果有node则查看node版本（node -v）

全局安装webpack

//全局安装webpack
npm install webpack@版本号 -g
//查看webpack版本
webpack -v

局部安装webpack

–save-dev是开发时依赖，项目打包后不需要继续使用的。
```
cd 对应目录
npm install webpack@版本号 --save-dev
```
为什么全局安装后，还需要局部安装呢？
1. 在终端直接执行webpack命令，使用的全局安装的webpack
2. 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

3、webpack的基本使用

dist->distribution(打包文件)

打包命令：

新版本：webpack 打包文件 -o 被打包文件

在被打包文件中自动生成一个main.js文件

4、webpack.config.js和package.json配置

创建webpack.config.js文件

const path=require("path");

module.exports={
  entry:"./src/main.js",
  output:{
    path:"./dist",
    filename:"boudle.js",
  },
}

npm init //初始化生成package.json

//package.json
//start
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "author": "",
  "license": "ISC"
}
//end

npm install//安装依赖,生成了node_modules、package-lock.json

//package.json中的scripts中起别名
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  }
  //npm run build==webpack

/*安装局部webpack,结果是package.json中增加了开发时依赖
"devDependencies": {
    "webpack": "^3.6.0"
 }
 */
 
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

//在终端里webpack都是全局的
noed_modules/.bin/webpack或者是 npm run build启动webpack打包

package.json中的scripts的脚本在执行的时候，会按照一定的顺序寻找命令的位置

首先，会寻找本地的node_modules/.bin路径中对应的命令。
如果没有找到，会去全局的环境变量中寻找。

5、webpack中使用css文件的配置

loader

通过npm安装需要使用的loader
在webpack.config.js中的module关键字下进行配置

const path=require("path");

module.exports={
  entry:"./src/main.js",
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:"boudle.js",
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        
        use:['style-loader','css-loader']
      }
    ]
  }
}

webpack读取loader是从右向左读取，先是’css-loader’。然后是’style-loader’

6、webpack中使用lese文件的配置

下载less-loader

npm install --save-dev less-loader less

配置,在webpack.config.js中的module的rules

{
        test:/\.less$/,
        use:[
          {
            loader:"style-loader"
          },
          {
            loader:"css-loader"
          },
          {
            loader:"less-loader"
          },
        ]
      }

7、图片文件的处理

下载url-loader

npm install --save-dev url-loader

配置,在webpack.config.js中的module的rules

{
        test:/\.(png|jpg|gif)$/,
        use:[
          {
            loader:"url-loader",
            options:{
              //当加载的图片小于limit时，会将图片编译成base64形式
               //当加载的图片大于limit时，需要使用file-loader模块进行加载
              limit:8192
            }
          }
        ]
      }

当加载的图片大于limit时，需要使用file-loader模块进行加载

下载file-loader

npm install file-loader --save-dev

dist文件夹下多出一个图片文件

我们可以在options中添加如下选项

img：文件要打包到的文件夹
name:获取图片原来的名字，放在该位置
hash:为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext:使用图片原本的扩展名

如果照片没有显示出来，是因为图片使用的路径不正确。

默认情况下，webpack会将生成的路径直接返回给使用者
但是我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/
在webpack.config.js加上publicPath

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AWUNMaAJ-1621930110836)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\1621821975550.png)]$
配置options中的name，设置打包后的名字格式
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFeeNyG1-1621930110838)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\1621822698442.png)]$

8、ES6转成ES5的babel

下载babel对应的loader

npm install --save-dev babel-loader  babel-core babel-preset-es2015

9、使用vue的配置过程

使用Vuejs,先安装vue

npm install vue --save

runtme-only->代码中不可以有任何的template
runtime-compiler->代码中可以有template,因为有compiler可以用于编译template

10、横幅plugin的使用

概念：plugin是插件，用于对某个现有的架构进行扩展
loader和plugin的区别
1. loader用于转换某个类型的模块，它是转换器或者加载器
2. plugin是插件，它是对webpack本身的扩展，是一个扩展器
使用过程：
1. 通过npm安装需要使用的plugins
2. 在webpack.config.js中的plugins中配置插件

添加版权的plugin–BannerPlugin

属于webpack自带的插件
修改webpack.config.js的文件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UDDAE0bh-1621930110841)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\1621909916347.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQotiM0m-1621930110843)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\1621909885996.png)]重新打包程序，boudle.js文件头部出现版权信息$
代码：

   const path=require("path");
   const webpack=require("webpack");
   
   module.exports={
     entry:"./src/main.js",
     output:{
       path:path.resolve(__dirname,"dist"),
       filename:"boudle.js",
       publicPath:'dist/'
     },
    ...
     plugins:[
       new webpack.BannerPlugin("最终版权归。。。所有")
     ]
   }

HtmlWebpackPlugin的使用
1. HtmlWebpackPlugin可以把index.html打包到dist文件夹中
2. 作用：
  1. 自动生成一个index.html文件
  2. 将打包的js文件自动通过script标签插入到body中
3. 安装：
```
npm install html-webpack-plugin --save-dev
```
4. 修改webpack.config.js文件中plugins部分的内容
```
const HtmlWebpackPlugin
=require("html-webpack-plugin")

plugins:[
    new webpack.BannerPlugin("最终版权归。。。所有"),
    new htmlWebpackPlugin({
      template:"index.html"
    })
  ]
```
5. 注意点：需要删除之前在output中添加的publicPath属性，否则插入script标签中的src可能会有问题

UglifyjsWebpackPlugin的使用

作用：对js等文件进行压缩处理

安装：

npm install uglifyjs-webpack-plugin@版本号 --save-dev

修改webpack.config.js文件，使用插件

const UglifyWebpackPlugin
=require("uglifyjs-webpack-plugin")

plugins:[
    new webpack.BannerPlugin("最终版权归。。。所有"),
    new htmlWebpackPlugin({
      template:"index.html"
    }),
    new UglifyWebpackPlugin(

    )
  ]

效果：boudle.js被压缩

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6AHrQf1i-1621930110844)(C:\Users\mi\AppData\Roaming\Typora\typora-user-images\1621912039031.png)]$

webpack-dev-server搭建本地服务器
1. webpack提供了可选的本地开发服务器，基于node.js搭建，内部使用express框架，可以实现浏览器自动刷新我们修改后的结果
2. 安装
```
npm install webpack-dev-server@版本号 --save-dev
```
3. devserver是webpack的一个选项，可以设置属性
  1. contentBase：为哪一个文件提供本地服务，默认是根文件。
  2. port：端口号
  3. inline:页面实时刷新
  4. historyApiFallback:在SPA页面中，依赖HTML5的history模式
4. webpack.config.js文件
```
devServer:{
	contentBase:'./dist',
	inline:true
}
```
5. 在package.json中配置另一个scripts:–open参数表示直接打开浏览器
```
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack",
      "dev":"webpack-dev-server --open"
    },
```

11、配置文件分离

新建文件夹build

–>新建文件base.config.js(里面是一些公共的配置)

const path=require("path");
const webpack=require("webpack");
const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
  entry:"./src/main.js",
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:"boudle.js",
    // publicPath:'dist/'
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        //css-loader解析css文件后，使用import加载，并且返回css代码
        //style-loader将模块的导出作为样式添加到DOM中
        use:['style-loader','css-loader']
      },
      {
        test:/\.less$/,
        use:[
          {
            loader:"style-loader"
          },
          {
            loader:"css-loader"
          },
          {
            loader:"less-loader"
          },
        ]
      },
      {
        test:/\.(png|jpg|gif)$/,
        use:[
          {
            loader:"url-loader",
            options:{
              //当加载的图片小于limit时，会将图片编译成base64形式
              //当加载的图片大于limit时，需要使用file-loader模块进行加载
              limit:8192,
              name:"img/[name].[hash:8].[ext]"
            }
          }
        ]
      },
      {
        test:/\.js$/,
        exclude:/(node_modules|bower_compoments)/,
        use:{
          loader:'babel-loader',
          options:{
            presets:['es2015']
          }
        }
      }
    ]
  },
  // alias--别名
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    new webpack.BannerPlugin("最终版权归。。。所有"),
    new HtmlWebpackPlugin({
      template:"index.html"
    }),
  ],
}

–>新建文件prod.config.js(里面是生产配置)

const UglifyWebpackPlugin=require("uglifyjs-webpack-plugin")
const webpackMerge=require("webpack-merge")
const baseConfig = require("./base.config")
module.exports=webpackMerge.merge(baseConfig,{
  plugins:[
    new UglifyWebpackPlugin()
  ],
  
})

–>新建文件dev.config.js(里面是开发配置)

const webpackMerge=require("webpack-merge")
const baseConfig = require("./base.config")
module.exports=webpackMerge.merge(baseConfig,{
  devServer:{
    contentBase:'./dist',
    inline:true
  }
})

安装

npm install webpack-merge --save-dev

作用：webpack-merge把基础配置和生产配置或者开发配置合并在一起

最后：在package.json中的scripts配置

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