webpack使用配置和基础知识

Webpack是一个模块打包器。这意味着，它的目的是（根据它们之间的依赖）合并一组模块。它的输出可能是一个或多个文件。除了打包模块，Webpack可以对你的文件做各种事情：例如，把SCSS转换为CSS，或者把Type转换为Java。它甚至可以压缩你所有的图像文件！但是，你究竟是为什么想要打包它们呢？

webpack的意思就是模块化打包

image.png

官网： [webpack]（https://www.webpackjs.com/）

环境搭建

创建package.json文件
cmd命令行输入 npm init
根据提示输入package文件的信息

image.png

安装webpack
本地安装(可以为每个项目安装不同版本，方便新项目)
npm install --save-dev webpack
npm install --save-dev webpack-cli
全局安装
npm install --global --save-dev webpack

打包

image.png

需要创建一个src文件夹
打包命令 （需要把这两个命令写入package.json的scripts里）
webpack --mode development 开发模式
webpack --mode production 生产模式

image.png

配置入口出口文件
新建webpack.config.js文件
导出对象：

const path = require('path')
module.exports = {  
  entry: './public/index.js',  // 入口文件
  output: {
      path: path.resolve(__dirname, 'build'), // 文件打包后的存放路径 __dirname nodejs获取当前文件路径
      filename: 'bundle.js' // 打包的文件名
  }
}

此时创建个pbulic文件夹，新建index.js，即可运行打包npm run dev/npm run build
多文件入口，单文件出口

const path = require('path')
module.exports = {  
  entry: ['./public/index.js', './public/home.js'] // 入口文件
  output: {
      path: path.resolve(__dirname, 'build'), // 文件打包后的存放路径 __dirname nodejs获取当前文件路径
      filename: 'bundle.js' // 打包的文件名
  }
}

多入口，多出口

const path = require('path')
module.exports = {  
  entry: {
    pageOne: './public/index1.js',  
    pageTwo: './public/index2.js',
  }, // 入口文件
  output: {
      path: path.resolve(__dirname, 'build'), // 文件打包后的存放路径 __dirname nodejs获取当前文件路径
      filename: '[name].js' // 打包的文件名, name会取入口文件的key值
  }
}

简洁化引入路径，可以通过配置resolve.alias 来简化引入路径

*在webpack.config.js里写入以下配置，即可*

  resolve: {
    alias: {
      //指向当前路径，以后请求则变成设置的路径 例如： require('util') === require( __dirname + '/src/util')
      node_modules: __dirname + '/node_modules',
      util: __dirname + '/src/util',
      lib: __dirname + '/src/lib',
      component: __dirname + '/src/comp',
      views: __dirname + '/src/views',
      service: __dirname + '/src/service',
      image: __dirname + '/src/image'
    }
  }

webpack-dev-server 配置和应用

image.png

安装webpack-dev-server
npm install --save-dev webpack-dev-server

配置webpack.config.js文件
【目前的自动刷新貌似只监听入口的js文件修改才会触发】

const path = require('path')
module.exports = {  
  entry: './public/index.js',  // 入口文件
  output: {
      path: path.resolve(__dirname, 'build'), // 文件打包后的存放路径 __dirname nodejs获取当前文件路径
      filename: 'bundle.js' // 打包的文件名
  },
  devServer: {
    // contentBase: './build', // 设置服务器访问的基本目录，需要跟打包目录一致
                                          //  必须设置为bundle.js 所在的目录，开发模式不设置，或设置未false
    host: 'localhost', // 服务器的ip地址
    port: 8080, // 服务器访问的端口
    open: true, // 启动服务时候是否自动打开页面
    inline: true, // 官方推荐
    hot: true, // 启动热更新
    watchOptions: [
          aggregateTimeout: 2000,  // 浏览器延迟多久更新
          poll: 1000,  //  每秒检查一次变动
    ],
    proxy: {
    '/api': {
              target: 'http://api.twobyoung.com', //API服务器的地址
              ws: true, //代理websockets
              changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
              pathRewrite: {
                // '^/api5'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8081/api5' 转接为 http://localhost:8081/api/
                '^/api5': '/api',
                //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                '^/api': '',
              }
            },
      '/foo': {
        target: 'http://www.twobyoung.com'
      }
    }
  }
}

打包自动生成html文件来使用打包后的文件

自动生成html依赖的项是：
html-webpack-plugin
先安装
npm install --save-dev html-webpack-plugin

配置package.config.js文件

const htmlWebpackPlugin= require('html-webpack-plugin')
module.exports = {  
  plugins: [
    new htmlWebpackPlugin({
        template: './public/index.html', // 模板，根据此模板生成html; 可以是html ejs等，引入什么文件就需要安装什么loader
        filename: 'webpack.html', 
        chunks: ['manifest ', 'vendor ',  'entry'], 
            //  打包完的html文件 需要引入的入口js文件，如果不设置会引入所有的js文件. 其中  vendor  是对node_modules 里公共模块的提取；mainfest 是vendor 的缓存
        excludeChunks: ['test'], // 意思是排除哪些js文件需要引入
        minify: { // 其他设置项，可以忽略使用默认值
            minisize: true, // 是否打包为最小值
            removeAttributeQuotes: true, // 是否去除引号
            removeComments: true, // 是否去除注释
            collapseWhiteSpace: true, // 是否去除空格
            minifyCss: true, // 是否压缩html内的样式
            minifyJs: true, // 是否压缩html内的js
            removeEmptyElements: true, // 去除内容为空的元素
        },
        hash: true, // 引入产出的时候加 哈希，避免缓存
        inject: true, // true, false ,body, head ,选择js文件注入的位置，true 和body 会放到body最后。head放到head里，false是不注入
        favicon: './image/icon.ico', // 添加icon
        
    })
  ]
}

package.json 里配置本地服务scripts

'scripts': {
    'dev': 'webpack --mode development',
    'build': 'webpack --mode production',
    'start': 'webpack-dev-server --mode development'
  }

webpack加载css 的loader

loader
因为webpack本身只识别js文件，但是开发过程中还需要很多css,img等类型文件。
所以就需要loader来进行转换

image.png

安装loader
npm install style-loader css-loader

配置loader

image.png

在webpack.config.js文件里写入

  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 
              {loader: 'css-loader', options: { sourceMap: true }} // 如果要开启css的sourcemap可以这样设置
        ] // cssloader需要css 和 style 两个loader。style-loader必须放在前面
       },
      { test: /.ts$/, use: 'ts-loader' }
    ]
  }

**处理less和sass文件**(两种方式类似，这里只讲一种)

webpack可以将less和sass文件直接处理成css文件
需要依赖于less-loader 和sass-loader 两个loader
安装
【注意，要使用less-loader 需要安装less 和less-loader】
npm install --save-dev less-loader
npm install --save-dev less
配置

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

webpack文件处理

图片处理(字体文件处理类似)
需要用到file-loader
npm install --save-dev file-loader
配置

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

file-loader也可以进行选项配置

image.png

  module: {
    rules: [
      {
        test: /.(png|jpg|jpeg|gif)$/,
        use: [
            'file-loader',
            {
                options: {
                    name: '[path][hash].[ext]', // 打包后文件的名字
                    // [path]资源相对于context的路径，加上之后会在build文件夹里创建path指向的文件夹
                    context: '../', // 生成文件所在文件夹的控制，比如加上../ 生成的图片会放在 [public上级文件夹名] + public 下
                    publicPath: 'http://www.twobyoung.com/health/123.jpg', // 打包后将引用的图片固定为这个网络图片
                    outputPath: './myImg' // 将图片放在自定义的文件夹名下
                }
            }
        ]
       }
    ]
  }

拷贝静态文件

需要用到copy-webpack-plugin
npm install --save-dev copy-webpack-plugin

const copyPlugin = require('copy-webpack-plugin')
module.exports = {  
  plugins: [
    new copyPlugin([  // **这里要注意，传入的参数一定是要数组**
      {
        from: __dirname + '/static', // 从哪拷贝
        to: __dirname + '/build/static'  // 拷贝到哪
      }
    ])
  ]
}

删除上次打包的文件

主要用于清楚带哈希值名称的文件
需要用到 clean-webpack-plugin
npm install --save-dev clean-webpack-plugin

const cleanPlugin = require('clean-webpack-plugin')
module.exports = {  
  plugins: [
    new cleanPlugin (['./build']) // **这里要注意，传入的参数一定是要数组**
  ]
}

第三方js库的引用

以jquery库为例
本地导入
编写配置文件
这里会用到webpack本身的一个插件 webpack.ProvidePlugin.
webpack.ProvidePlugin是一个键值对形式。键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会优先从npm安装的库里查找符合的库。
在 webpack.config.js里写入

const webpack = require('webpack') // 这里要注意引入webpack实例，否则无法访问providePlugin
  resolve: {
    alias: {
        jQuery: path.resolve(__dirname, 'public/js/jquery.min.js')
    }
  }, // 指向库的路径
  plugins: [
      new webpack.ProvidePlugin({
          jq: 'jQuery'
      })
  ]

npm 安装库
npm install jquery --save-dev

使用
import $ from 'jquery'

使用babel-loader编译es6

babel转换语法需要依赖三个项：
babel-loader 负责es6语法转换
babel-core babel 核心包
babel-preset-env 告诉babel使用那种转码规则进行文件处理

**安装**

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

loader进行配置

  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/, // 这里需要对node_modules里现成的js文件进行排除，只编译自己写的js即可
        use: 'babel-loader'
       }
    ]
  }

**转换规则配置**

在根目录新建一个 .babelrc文件
写入规则，例如：

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

也可以在loader的配置里写入转换规则

  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: [
            'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        ]
       }
    ]
  }

提取css到单独的文件

ExtractTextPlugin 老版插件（webpack 4使用）

**安装**

npm install --save-dev extract-text-webpack-plugin@next
后边必须加@next要不然会报错
配置
在webpack.config.js里写入

const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {  
  rules: [
    {
      test: '/.css$/',
      use: ExtractTextPlugin.extract({
          fallback: 'style-loader', // 如何提取css文件
          use: 'css-loader' // 告诉它如何编译css
      })
    }
  ],
plugins: [
    new ExtractTextPlugin('./css/index.css') // 这里传入生成的css文件名
  ]
}

mini-css-extract-plugin 新版插件

  **安装**

npm install --save-dev mini-css-extract-plugin
配置
在webpack.config.js里写入

const MiniCssPlugin = require('extract-text-webpack-plugin')
module.exports = {  
  rules: [
    {
      test: '/.css$/',
      use: [MiniCssPlugin .loader, 'css-loader']
    }
  ],
plugins: [
    new MiniCssPlugin({
        filename: './css/index.css'
     }) // 这里传入生成的css文件名
  ]
}

### 压缩css文件

压缩css使用的插件是 optimize-css-assets-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin

*配置*

在webpack.config.js里写入

const optimizeCss = require('optimize-css-assets-webpack-plugin')
module.exports = {  
  rules: [
    {
      test: '/.css$/',
      use: [MiniCssPlugin .loader, 'css-loader']
    }
  ],
plugins: [
    new optimizeCss ({
        assetsNameRegExp: /.css$/g, // 正则表达式，用于匹配需要优化的压缩的资源名， 默认/.css$/g
        cssProcessor: require('cssnano'), // 用于压缩和优化css的处理器 默认 是 cssnano
        cssProcessorPluginOptions: {
            preset: ['default', {discardComments: {removeAll: true}}]
        },
        // 传递给cssProcessor的插件选项，默认{}, discardComments: 去除注释
        canPrint: true // 表示插件能否在console中log信息，默认true
     })
  ]
}

### postCss处理浏览器前缀

需要应用postcss-loader 和autoprefixer
安装
npm install --save-dev postcss-loader autoprefixer
配置

  module: {
    rules: [
      {
        test: /.less$/,
        use: ['style-loader', 'css-loader', 'less-loader',
          {
             loader: 'postcss-loader',
             options: {
                   plugins: [
                          require('autoprefixer')({
                                browsers: [
                                      'ie >= 8', // ie 版本大于等于8
                                      'Firefox >= 20', // 火狐版本大于等于20
                                      'Safari' >= 5', // safari版本大于等于5
                                      'Android >= 4', // 安卓版本大于等于4
                                      'Ios >= 6', // ios版本大于等于6
                                      'last 4 version', // 浏览器当前最新的4个版本
                               ]
                          }),
                    ]
              }
          }
        ],
        
       }
    ]
  }

浏览器设置也可以放在package.json里边(package.config.js 里需要删掉require('autoprefixer')后面的配置传参)
注意：package.json文件里不能有注释

'browserslist': [
    'ie >= 8',
    'Firefox >= 20',
    'Safari >= 5',
    'Android >= 4',
    'Ios >= 6',
    'last 4 version'
  ]

使用sourceMap

js的sourcemap 通过设置 webpack.config.js 的 devtool属性来实现，可选值有以下这些：

image.png

总体来说分为五个类型：（真正的属性值是以下这些特性的组合）

1.eval
每个模块都用eval()执行，每个模块后加sourceURL来关联模块处理前后的对应关系
由于会映射到转换后的代码，而不是映射原始代码，（没有从loader中获取sourceMap）所以不能正确的显示行数。因为不需要生成sourcemap，所以速度快

2.source-map
source-map会为模块生成独立的sourcemap文件

image.png

打包后的模块会在后面对应引用一个.map文件同时打包好的文件夹下会生成响应的.map文件

3.Inline
与source-map不同的是，添加Inline属性后，不会生成.map文件，source-map转换为DataUrl后添加到bundle中

image.png

4.cheap
cheap属性会为打包后的文件生成.map文件但是与source-map不同的是cheap的.map会忽略原始代码中的列信息，也不包含loader的sourcemap

5.module
包含了loader之间的sourcemap,将loader source map简化为每行一个映射

  #### 一般的

image.png

webpack使用配置 和基础知识

环境搭建

简洁化引入路径，可以通过配置resolve.alias 来简化引入路径

webpack-dev-server 配置和应用

打包自动生成html文件来使用打包后的文件

webpack加载css 的loader

webpack文件处理

拷贝静态文件

删除上次打包的文件

第三方js库的引用

使用babel-loader编译es6

提取css到单独的文件

ExtractTextPlugin 老版插件（webpack 4使用）

mini-css-extract-plugin 新版插件

使用sourceMap

推荐阅读更多精彩内容

webpack使用配置和基础知识