webpack基础

安装

npm install -g webpack webpack-cli

快速开始

最新的 webpack 支持零配置使用，默认入口为当前目录下的 src 中的 index.js 文件，默认打包输出的目录为 dist 目录，默认打包模式 mode 为 development

1. 先建一个文件夹，如 webpack-test

2. webpack-test 文件下新建一个 src 目录，再src 下新建一个 index.js 文件

3. 终端进入 webpack-test 目录，运行 webpack

4. webpack 会在 webpack-test 目录下生成一个 dist 目录。

配置项说明

在 webpack-test 目录下新建一个 webpack.config.js ，返回的是一个配置对象。

字段名	可选值	说明
mode	“development” / “production” / “none”	表示打包类型，为 production 时会压缩代码
entry	字符串 / 对象	打包入口文件
output	对象	配置打包后文件夹和格式化文件名等

entry 配置入口文件

在 src 目录下新建 a.js ，b.js

// 单一入口
module.exports = {
  entry:'./src/a.js'
}

// 多入口
module.exports = {
  entry:{
    a:'./src/a.js',
    b:'./src/b.js'
  }
}

在多入口时，会在 dist 目录下打包 a.js 和 b.js

output

• filename 打包之后的文件夹名

// 单入口情景
module.exports = {
  entry:'./src/a.js',
  output:{
    filename:'[name].[hash:7].js'
  }
}

// 打包后类似 main.abdfa13.js

// 多入口情景
module.exports = {
  entry:{
    a:'./src/a.js',
    b:'./src/b.js'
  },
  output:{
    filename:'[name].[hash:7].js'
  }
}

// 打包后生成类似 a.abdfa13.js , b.abdfa13.js

在配置文件中，有几个可用的参数，如 hash 当前打包随机字符串，name对应 entry 中的属性名（但单入口默认为main），ext 对应 loader 中的文件后缀名。

• path 打包生成的目标文件夹，必须为一个绝对地址

const path = require('path');

module.exports = {
	entry:'./src/a.js',
  output:{
    filename:'[name].[hash:7].js',
    path:path.resolve(__dirname,'./dist')
  }
}

• publicPath，针对打包后的项目不在服务器的根目录访问，需要加上路径的情况。保证资源访问地址正确。主要体现在页面中引用绝对地址的图片，和 htmlWebpackPlugin 注入资源地址的时候。

比如最后项目访问路径为：https://haokur.com/webpack-test/index.html ，则需要配置

const path = require('path');

module.exports = {
	entry:'./src/a.js',
  output:{
    filename:'[name][hash:7].js',
    path:path.resolve(__dirname,'./dist/webpack-test'),
    publicPath:'/webpack-test/'
  }
}

发布时，则可以将 dist 下面的 webpack-test 目录部署到服务器的根目录下面。

module

为一个对象，其中 rules 定义各种文件使用什么 loader 去加载处理。

• rules，数组形式

const path = require('path');

module.exports = {
	entry:'./src/a.js',
  output:{
    filename:'[name][hash:7].js',
    path:path.resolve(__dirname,'./dist/webpack-test'),
    publicPath:'/webpack-test/'
  },
  module:{
    rules:[
      {
        test:/.js$/,
        loader:"babel-loader",
      },
      {
        test:/.scss$/,
        use:[
          {
            loader:'style-loader',
          },
          {
            loader:'css-loader',
            options:{
              module:true
            }
          },
          {
            loader:'sass-loader'
          }
        ]
      }
    ]
  }
}

test 为对应的文件后缀名的正则匹配，loader 为使用何种加载器去处理匹配的文件。当需要多个 loader 时，可以使用 use

以上的 loader 都需要先安装。

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

plugins

为一个数组对象，可以有多个插件；以 html-webpack-plugin 为例

先安装插件依赖

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

添加配置

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

module.exports = {
	entry:'./src/a.js',
  output:{
    filename:'[name][hash:7].js',
    path:path.resolve(__dirname,'./dist/webpack-test'),
    publicPath:'/webpack-test/'
  },
  module:{
    rules:[
      {
        test:/.js$/,
        loader:"babel-loader",
      },
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      fileName:'index.html',
      template:'index.html',
      inject:true,
    })
  ]
}

devtool

针对同样的代码进行以下的比较：

可选值	打包后大小(KiB)	是否生成.map文件	能定位到源码	说明
eval	24.9	无	否	eval执行代码
eval-source-map	56.3	无	是	可定位源代码
cheap-eval-source-map	56	无	是	可定位源代码
cheap-module-eval-source-map	56	无	是	可定位源代码
cheap-module-source-map	25.5	是	是	可定位源代码
hidden-source-map	23	是	否	源文件为混淆在一起的
nosources-source-map	23.1	是	否	不显示源文件代码
source-map	23.1	是	是	定位为混淆在一起的代码
false	23	无	是	定位为混淆在一起的代码

推荐：

开发环境：cheap-module-eval-source-map

测试环境：cheap-module-source-map

生产环境：nosources-source-map 或 false 或 source-map

测试力求更新速度快，定位问题源文件方便；测试环境尽可能模拟真实生产环境效果；生产环境尽可能代码文件最小，方便定位线上问题用 source-map 或 false ，不希望被看到源代码用 nosources-source-map，执行错误路径引导将引导到一个空内容文件。

resolve

定义 webpack 如何寻找对应模块的文件。

• extensions，定义可省的文件后缀，注意有一个点

• alias，通过别名来映射到真实的路径，常用于将长路径用别名代替。

const path = require('path')

module.exports = {
  resolve:{
    extensions:['.js','.ts'],
    alias:[
      '@':path.resolve(__dirname, "../src/"),
    ]
  }
}

externals

开发时照常引用，但是打包后，webpack 却不将对应的包打包，而由用户手动引入。

a.js

import $ from 'jquery'

console.log($)

webpack.config.js

module.exports = {
 	externals:{
    'jquery':"jQuery"
  }
}

index.html

<script src="https://cdn.com/jquery.min.js"></script>

jquery 为源代码中引入的模块名，jQuery 为 index.html 中引入挂载在 window 上的变量名。