webpack个人理解（新手）

---

typora-copy-images-to: pic

webpack

1.webpack定义

##2.webpack的安装与初级配置

• npm init -y初始化形成json文件

• npm install webpack webpack-cli --save-dev安装本地的而非全局方便更新

• 打包默认entry入口文件 src/index.js,默认output出口 dist/main.js

  打包模式webpack --mode development 开发阶段模式，webpack --mode production 生产阶段（压缩）

• 更改json文件里的javascript配置

• npm run dev 或者npm run build进行打包操作

3.webpack核心配置config文件

• 新建一个webpack.config.js文件

• 配置入口entry（所需打包的文件路径）

• 配置出口output

  1.path指定文件打包的存放路径

  2.path.resolve()方法将路径或路径片段的序列处理成绝对路径

  3.__dirname表示当前文件所在的目录的绝对路径

  4.filename是打包后文件的名称

const path = require('path');

module.exports = {
    entry: './public/index.js',
    output: {
        path: path.resolve(__dirname,'build'),
        filename: 'bundle.js'
    }
}

当存在webpack.config.js优先执行此处的配置

4.入口entry和出口output的进阶用法

一、入口entry

(1)单入口：

单文件 例如：

 entry: './src/index.js'

多文件 在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk（打包后的文件）"时，传入数组的方式就很有用。

例如：

entry: ['./src/index.js','./src/index2.js',..........]

(2)多入口：

例如：

entry:{
	pageOne: './src/pageOne/index.js',
	pageTwo: './src/pageTwo/index.js'
	pageThree: './src/pageThree/index.js
}

二、出口output

(1)单出口

output:{
    path: path.resolve(__dirname,'dist'),
	filename:'bundle.js'
}

(2)多出口

output:{
    path: path.resolve(__dirname,'dist'),
    filename:'[name].js'
}

多入口要和多出口配合使用

5.开发调试配置本地服务器webpack-dev-server

1.了解webpack-dev-server

• webpack-dev-server是用来配置本地服务器的，使用它可以为webpack打包生成的资源文件提供web服务。

• webpack-dev-server主要提供两个功能：

  (1) 为静态文件提供web服务

  (2)自动刷新和热替换(HMR)

2.安装webpack-dev-server

npm install --save-dev webpack-dev-server

3.配置webpack.config.js文件

devServer:{
    contentBase:'./build',//设置服务器访问的基本目录
    host:'localhost',//服务器的ip地址
    port:8080,//端口
    open:true//自动打开页面
}

4.配置package.json

”scripts":{

​ “start”: “webpack-dev-server --mode development”

}

6.webpack加载css所需loader及其使用方式(style-loader和css-loader)

1.安装loader

安装style-loader和css-loader

npm install style-loader css-loader --save-dev

2.配置loader

• 在webpack.config.js文件里配置module中的rules

  在webpack的配置中loader有两个目标

  (1).test属性，用于标识出应该被对应的loader进行转换的某个或某些文件

  (2).use属性，表示进行转换时，应该使用哪个loader

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']//引用顺序不可更改
        }
    ]
}

7.编译es6

babel转化语法所需依赖项：

babel-loader： 负责 es6 语法转化

babel-core： babel核心包

babel-preset-env：告诉babel使用哪种转码规则进行文件处理

1.安装依赖

npm install babel-loader @babel/core @babel/preset-env --save-dev

2.配置config文件

exclude表示不在指定目录查找相关文件

module:{
    test:/\.js$/,
    exclude:/node_modules/,
    use:'babel-loader'
}

3.新建.babelrc文件配置转换规则

{
    "presets":["@babel/preset-env"]
}

4.另一种规则配置

use:{
    loader: 'babel-loader',
    options:{
        presets:['@babel/preset-env']
    }
}

此处use即是上面得use:‘babel-loader’

8.生成HTML(html-webpack-plugin)

1.了解html-webpack-plugin

HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。

根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里

2.安装依赖

npm install html-webpack-plugin --save-dev

3.配置config文件

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugin:[
    new HtmlWebpackPlugin({
        template:"./src/index.html",//模板文件路径
        filename:'webpack.html',//生成文件得名称
        minfy:{
            minmize:true,//是否打包为最小值
            removeAttributeQuotes:true, //去除引号
            removeComments:true,//去除注释
            collapswWhitespace:true,//去除空格
            minfyCSS:true,//压缩html内的样式
            minfyJS:true,//压缩html内的js
            removeEmptyElements:true,//清理内容为空的元素
        },
        hash:true//引入产出资源阿时候加上哈希避免缓存
    }
    )
]

9.提取分离css

1.处理效果

将所有的入口chunk(entry chunks)种引用的css,移动到独立分离的css文件

2.ExtractTextPlugin插件(旧版插件)

• 安装(下载)

  npm install --save-dev extract-text-webpack-plugin@next
  

• 配置config文件

  引入插件

  const ExtractTextPlugin = require("extract-text-webpack-plugin")
  

• Rules设置

  fallback:编译后用什么loader来提取css文件

module:{
    rules:[
        {
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:"css-loader"
            })
        }
    ]
}

• Plugins设置

  plugins:[
      new ExtractTextPlugin("./css/[name].css"),//也可以打包在一个文件内
  ]
  

3.mini-css-extract-plugin插件(新版插件)

• 安装

  npm install --save-dev mini-css-extract-plugin
  

• 配置config文件

  • 引入插件

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  

  • Rules设置

  module:{
      rules:[
          {
              test:'/\.css$/,
              use:[MiniCssExtractPlugin.loader,'css-loader']
          }
      ]
  }
  

  • Plugin设置

  plugins:[
      new MiniCssExtractPlugin({
          filename:"./css/[name].css"
      })
  ]
  

11.文件处理

1.图片处理

• 安装loader

  npm install --save-dev file-loader
  

• 配置config文件

  module:{
      rules:[
          {
              test:/\.(png|jpg|gif|jpeg)$/,
              use:'file-loader'
          }
      ]
  }
  

• 选项配置

  test:/\.(png\jpg\gif)$/,
  use:[
      {
          loader: 'file-loader',
          options:{}
      }
  ]
  

  配置options:

  name: 为你的文件配置自定义文件名模板(默认值hash.ext)

  context:配置自定义文件的上下文，默认为webpack.config.js

  publicPath:为你的文件配置自定义public发布目录

  outputPath:为你的文件配置自定义output输出目录

2.字体文件处理

• 下载字体文件

  以bootstrap字体文件为例子

  Boostrap字体文件下载地址：https://v3.bootcss.com/getting-started/

• 配置config文件

  rules:[
      {
          test:/\.css$/,
          use:['style-loader','css-loader']
      },
      {
          test:/\.(ttf|woff|woff2|eot|svg)$/,
          use:[{
              loader:'file-loader',
              options:{
                  outputPath:'font/'
              }
          }]
      }
  ]
  

3.第三方js库处理

以jquery库为例子

• 本地导入

  编写配置文件：

  webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

  如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着设置的路径一直找下去。

  使用webpack.ProvidePlugin前需要引入webpack

  const webpack = require("webpack");
  

  resolve:{
      alias:{
          jQuery:path.resolve(__dirname,"public/js/aa.js")
      }
  },
      plugins:[
          new web    pack.ProvidePlugin({
              jQuery:"jQuery"
          })
      ]
  

• npm安装模块

  安装Jquery库:

  npm install jquery --save-dev
  

  直接在js里import引入

  import $ from 'jquery'