关于webpack:粗涉Webpack

60次阅读

共计 4842 个字符，预计需要花费 13 分钟才能阅读完成。

Webpack 记录文档

  1. 概念: webpack 是一个古代 JavaScript 应用程序的动态模块打包器(module bundler)。当 webpack 解决应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 bundle。

  2. 打包第一个文件:

    • 全局装置 webpack:

      npm install webpack -g
    • 新建一个文件夹放入两个文件，一个为 html 一个为就是文件，其中 HTML 引入该 js 文件打包后的文件名
    • 执行 webpack js 文件 打包后的文件名

    • 此时如果呈现报错:

      Cannot find module 'webpack-cli'
请执行: npm install --save-dev webpack

      再执行呈现:

      WARNING in configuration 
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
请先执行 npm init -y, 生成 package.json
在新建一个 webpack.config.js 配置文件，用于配置 webpack 选项
写入:
const path = require('path')
// 通过 Node 模块，向里面裸露一个配置
module.exports = {entry:path.join(__dirname, './src/main.js'), // 打包文件
  output: {path: path.join(__dirname, './dist') // 打包好的文件名
  },
  mode: 'development' // 设置 mode
}

      此时再执行打包将无报错，且生成的文件将放入当前目录下的 dist 文件夹, 默认文件名为 main.js

  3. 五大外围概念:
    | 中文名 | 配置项 | 概述 |
    | —- | —- | —- |
    | 入口 | entry | 构建依赖图的开始 |
    | 输入 | output | 打包产出地位 |
    | 转化器 | loader | 编译的时候, 对各种类型的模块, 进行转换解决 |
    | 插件 | plugin | 对每个工作环节，提供性能 |
    | 模式 | mode | 设置打包环境 |

  4. 意识 webpack 配置文件(即 webpack.config.js)

    • 作用: 把配置参数，抽离到独自的文件，便于我的项目配置。

    • 根底格局:

      const path = require('path')    // node 的根底 path 模块
const 插件 1 = require('插件 1')
module.exports = {
  // 模式——设置开发模式
  mode: 'development',
  // 入口——指定 src/index.js 为入口文件
  entry: {main: './src/index.js'},
  // 输入——指定 dist/bundle.js 为输入文件
  output: {path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 转换器。模块 > 规定
  module: {
    rules: [
      { test: /\. 后缀名 $/, 
        use: [
          {
            loader: '转换器 1',
            options: {}    // 转换器 1 配置}
        ]
      }
    ]
  },
  // 插件
  plugins: [
    new 插件 1({// 插件配置})
  ]
}

  5. 入口(entry):

    • 每个 entry 属性，对应一个入口文件，便于单页、多页利用的 js 引入,

      单页面入口
entry: {main: './src/index.js}
// 可缩写为 entry: './src/index.js'
      多页面入口
 entry: {
   one: './src/one/index.js',
   two: './src/two/index.js',
   three: './src/three/index.js'
 }

    也可应用 node 的 path 模块实现获取绝对于配置文件的门路

     const path = require('path')
 module.exports = {entry: path.resolve(__dirname, './app.js')
 }
 // 留神，这里的__dirname, 为两个下划线

    • entry 反对三种格局:

      对象:

      entry: {<key>: <value>}
// key 能够是简略的字符串, 对应着 output.filename 配置中的 [name] 变量,
entry: {'app-entry': './app.js'}
// key 还能够是门路字符串。此时 webpack 会主动生成门路目录，并将门路的最初作为[name]
entry: {'path/of/entry': './app.js'}

// value 如果是字符串，而且必须是正当的 noderequire 函数参数字符串。比方文件门路：'./app.js'(require('./app.js'))；比方装置的 npm 模块：'lodash'(require('lodash')) 

entry: {'my-lodash': 'lodash'},
output: {
  path: './output',
  filename: '[name].js'
}

      数组:

      entry: ['./app.js', 'lodash']
等价于:
entry: {main: ['./app.js', 'lodash']
}

      字符串:

      entry: './app.js'
等价于
entry: {main: './app.js'}

  6. output（输入）

    • output 是影响编译输入的选项。output 选项通知 webpack 怎么把编译文件写入磁盘。留神，尽管能够有很多输出口，然而只有一个输入配置

      output: {path: path.resolve(__dirname, 'dist')
  filename: [name].js    // 应用 [name] 占位符，自动识别入口文件名，从而辨别打包文件名
}
    • output.filename: 指定输入到硬盘的文件的的文件名。这里不能是一个相对的门路！output.path 会确定该文件的存在硬盘额门路的。filename 仅仅用来给每个文件命名而已。

      [name]被入口的名字替换.

      [hash]被编译器 hash 替换.

      [chunkhash] 被入口的 hash 替换.

    • output.path 编译后的文件寄存门路，绝对路径，取 [hash] 将被编译后的文件 hash 替换
    • output.chunkFilename 非入口 chunk 的文件名，作为一个相对路径放到 output.path 里。

  7. module 配置如何解决模块

    • rules 配置模块的读取和解析规定，通常用来配置 Loader，类型是一个数组，数组里的每一项都形容了怎么去解决特定的文件。

    匹配规定：

    1. 条件匹配：通过 test/include/exclude 三个配置项来命中 Loader 要利用的规定文件
2. 利用规定：对选中的文件通过 use 配置项来利用 loader，能够利用一个 loader 或者从后往前利用一组 loader，同时还能够别离给 loader 传入参数。3. 重置程序，一组 loader 的执行程序默认是从右到左执行，通过 exforce 选项能够让其中一个 loader 的执行程序放到最前或者最初。module: {
    rules: [
        {
            test: /\.js$/,
            use: ['babel-loader?cacheDirectory'],
            include: path.resolve(__dirname, 'src')
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            exclude: path.resolve(__dirname, 'node_modules')
        },
        { // test、include、exclude 还反对数组类型
            test: [/\.jsx?$/, /\.tsx?$/],
            include: [path.resolve(__dirname, 'src'),
                path.resolve(__dirname, 'test')
            ],
            exclude: [path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname, 'bower_modules')
            ]
        }
    ]
}

    • 在 loader 须要传入很多参数的时候，咱们还能够通过一个 object 来形容，如：

      use: [
    {
        loader: 'babel-loader',
        options: {cacheDirectory: true},
         // enforce:'post' 的含意是把该 Loader 的执行程序放到最初
        // enforce 的值还能够是 pre，代表把 Loader 的执行程序放到最后面
        enforce:'post'
    }
]
    • noParse: 能够让 webpack 疏忽局部未采纳模块化的文件的递归解析和解决，类型能够为 RegExp, [RegExp], function 其中一个

    • 常见的 loader 配置：

      { // 加载图像
  test: /\.(png|svg|jpg|gif)$/,
  use: ['file-loader']
}

{ // 加载字体
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['file-loader']
}

{ // 加载 css
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

  8. plugins:

    // 通过 new 实例，启用插件
plugins: [new webpack.ProgressPlugin(),    //webpack 自带一系列插件
  new HtmlWebpackPlugin({template: './src/index.html'})    // 应用对象，为插件配置参数
]

    常见的 plugin：

    • HotModuleReplacementPlugin –开启全局的模块热替换(HMR)；
    • NamedModulesPlugin –当模块热替换 (HMR) 时在浏览器控制台输入对用户更敌对的模块名字信息；
    • CommonsChunkPlugin –提取 chunk 公共局部；
    • ExtractTextPlugin –独立生成 css 文件，以外链的模式加载；
    • UglifyJsPlugin –压缩 js；
    • HtmlWebpackPlugin –应用模版生成 html。

  9. 环境变量：

    webpack 能够设置环境变量以辨别生产模式还是开发模式，由此执行不同的操作。

    const NODE_ENV = process.env.NODE_ENV // 可获取到环境变量
可由此对目前是生产模式还是开发模式
  10. 开发模式：webpack.dev.js 配置文件
  11. 生产模式：webpack.prod.js 配置文件

  12. resolve: webpack 在构建包的时候会按目录的进行文件的查找，resolve 属性中的 extensions 数组中用于配置程序能够自行补全哪些文件后缀。例如：

    resolve: {nodules: [path.resolve(__dirname, "node_modules")],
    extensions: ['.js', '.json', '.scss', '.vue', '.json']
    // 模块别名定义，不便后间接援用别名，无需多写长地址
    alias: {'@/static': resolve('static'), // 将 @/static 指向以后我的项目，下的 static 目录
      '@': resolve('src'), // 将 @指向 src 目录
    }
}

  13. 命令：

    // 开发模式，启动服务器
webpack-dev-server --open --config webpack.dev.js
// 生产模式，打包
webpack --config webpack.prod.js
  14. webpack 还能够反对 Node 操作，可通过 Node 对现有文件进行操作，以满足打包所需。

应用 demo 参考：阮一峰的 https://github.com/ruanyf/web…

正文完
webpack
发表至： webpack
2021-02-23
 0
关于webpack:Webpack中的plugin插件机制
关于webpack:代理模式在vue中惰性加载echarts等第三方库
关于webpack:webpack-学习1
关于webpack:webpack项目如何正确打包引入的自定义字体