【进步系列】webpack相干学问

此次我们主要研讨的是webpack框架的相干学问,webpack是一个打包构建的前端框架,用于处置惩罚前端开辟的模块化题目。

运用场景和纵向比较

说到webpack,肯定你还会想到gulp和grunt这些框架,那末webpack是做什么的呢?他和其他的框架有什么区别呢?我们一同来剖析一下。
在这一段落中我们主要对webpack和gulp举行纵向的比较剖析:
webpack的根本使命是举行打包,把在一个文件中援用的别的一个文件,都打包在一同。
gulp根本使命是完成自动化,实在我们本身能够写一段node剧本完成一切js文件的紧缩。gulp就是封装好剧原本帮我们做这些事
另有:
webpack实在也能够完成js文件的紧缩,然则这只不过是在完成打包使命的大背景下,所完成的分外使命

那末运用场景呢?我在什么情况下该用webpack,我在什么情况下该用gulp,笔者以为,这就仁者见仁智者见智了,如果说,你就是在开辟工程中为了打包,为了模块化,那末你肯定要用webpack啊,另有你愿望完成剖析sass直接放入html中,那末这能够用webpack完成,在打包的历程当中就随手完成了。然则,你首次以外,还想完成,在上线构建的时刻,把图片上传cdn而且替代链接,那末你就须要分外引入gulpwebpackgulp都有本身的优点和弊端,剖析好这两个框架,你就能够在运用历程当中瓮中之鳖。

基础设置项

基础设置项。我们起首说说怎样定义基础设置项,第一是我们能够shell的体式格局,定义设置,都写在敕令行上,然则这类体式格局不好,设置项一多,实行的敕令就迥殊长。因而我们平常采纳的都是设置文件的体式格局。

const path = require('path');

module.exports = {
  // entry 示意 进口,Webpack 实行构建的第一步将从 Entry 最先,可笼统成输入。
  // 范例能够是 string | object | array   
  entry: './app/entry', // 只要1个进口,进口只要1个文件
  entry: ['./app/entry1', './app/entry2'], // 只要1个进口,进口有2个文件
  entry: { // 有2个进口
    a: './app/entry-a',
    b: ['./app/entry-b1', './app/entry-b2']
  },

  // 怎样输出效果:在 Webpack 经由一系列处置惩罚后,怎样输出终究想要的代码。
  output: {
    // 输出文件寄存的目次,必需是 string 范例的绝对途径。
    path: path.resolve(__dirname, 'dist'),

    // 输出文件的称号
    filename: 'bundle.js', // 完全的称号
    filename: '[name].js', // 当设置了多个 entry 时,经由过程称号模版为差别的 entry 天生差别的文件称号
    filename: '[chunkhash].js', // 依据文件内容 hash 值天生文件称号,用于浏览器长时间缓存文件

    // 宣布到线上的一切资本的 URL 前缀,string 范例
    publicPath: '/assets/', // 放到指定目次下
    publicPath: '', // 放到根目次下
    publicPath: 'https://cdn.example.com/', // 放到 CDN 上去

    // 导出库的称号,string 范例
    // 不填它时,默许输出花样是匿名的马上实行函数
    library: 'MyLibrary',

    // 导出库的范例,罗列范例,默许是 var
    // 能够是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ,
    libraryTarget: 'umd', 

    // 是不是包括有效的文件途径信息到天生的代码里去,boolean 范例
    pathinfo: true, 

    // 附加 Chunk 的文件称号
    chunkFilename: '[id].js',
    chunkFilename: '[chunkhash].js',

    // JSONP 异步加载资本时的回调函数称号,须要和效劳端搭配运用
    jsonpFunction: 'myWebpackJsonp',

    // 天生的 Source Map 文件称号
    sourceMapFilename: '[file].map',

    // 浏览器开辟者东西里显现的源码模块称号
    devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',

    // 异步加载跨域的资本时运用的体式格局
    crossOriginLoading: 'use-credentials',
    crossOriginLoading: 'anonymous',
    crossOriginLoading: false,
  },

  // 设置模块相干
  module: {
    rules: [ // 设置 Loader
      {  
        test: /\.jsx?$/, // 正则婚配掷中要运用 Loader 的文件
        include: [ // 只会掷中这里面的文件
          path.resolve(__dirname, 'app')
        ],
        exclude: [ // 疏忽这里面的文件
          path.resolve(__dirname, 'app/demo-files')
        ],
        use: [ // 运用那些 Loader,有前后序次,从后往前实行
          'style-loader', // 直接运用 Loader 的称号
          {
            loader: 'css-loader',      
            options: { // 给 html-loader 传一些参数
            }
          }
        ]
      },
    ],
    noParse: [ // 不必剖析和处置惩罚的模块
      /special-library\.js$/  // 用正则婚配
    ],
  },

  // 设置插件
  plugins: [
  ],

  // 设置寻觅模块的划定规矩
  resolve: { 
    modules: [ // 寻觅模块的根目次,array 范例,默许以 node_modules 为根目次
      'node_modules',
      path.resolve(__dirname, 'app')
    ],
    extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名
    alias: { // 模块别号设置,用于映照模块
       // 把 'module' 映照 'new-module',一样的 'module/path/file' 也会被映照成 'new-module/path/file'
      'module': 'new-module',
      // 运用末端标记 $ 后,把 'only-module' 映照成 'new-module',
      // 然则不像上面的,'module/path/file' 不会被映照成 'new-module/path/file'
      'only-module$': 'new-module', 
    },
    alias: [ // alias 还支撑运用数组来更细致的设置
      {
        name: 'module', // 老的模块
        alias: 'new-module', // 新的模块
        // 是不是是只映照模块,如果是 true 只要 'module' 会被映照,如果是 false 'module/inner/path' 也会被映照
        onlyModule: true, 
      }
    ],
    symlinks: true, // 是不是追随文件软链接去征采模块的途径
    descriptionFiles: ['package.json'], // 模块的形貌文件
    mainFields: ['main'], // 模块的形貌文件里的形貌进口的文件的字段称号
    enforceExtension: false, // 是不是强迫导入语句必须要写明文件后缀
  },

  // 输出文件机能搜检设置
  performance: { 
    hints: 'warning', // 有机能题目时输出正告
    hints: 'error', // 有机能题目时输出毛病
    hints: false, // 封闭机能搜检
    maxAssetSize: 200000, // 最大文件大小 (单元 bytes)
    maxEntrypointSize: 400000, // 最大进口文件大小 (单元 bytes)
    assetFilter: function(assetFilename) { // 过滤要搜检的文件
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: 'source-map', // 设置 source-map 范例

  context: __dirname, // Webpack 运用的根目次,string 范例必需是绝对途径

  // 设置输出代码的运转环境
  target: 'web', // 浏览器,默许
  target: 'webworker', // WebWorker
  target: 'node', // Node.js,运用 `require` 语句加载 Chunk 代码
  target: 'async-node', // Node.js,异步加载 Chunk 代码
  target: 'node-webkit', // nw.js
  target: 'electron-main', // electron, 主线程
  target: 'electron-renderer', // electron, 衬着线程

  externals: { // 运用来自 JavaScript 运转环境供应的全局变量
    jquery: 'jQuery'
  },

  stats: { // 掌握台输出日记掌握
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true,
  },

  devServer: { // DevServer 相干的设置
    proxy: { // 代理到后端效劳接口
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // 设置 DevServer HTTP 效劳器的文件根目次
    compress: true, // 是不是开启 gzip 紧缩
    historyApiFallback: true, // 是不是开辟 HTML5 History API 网页
    hot: true, // 是不是开启模块热替代功用
    https: false, // 是不是开启 HTTPS 形式
    },

    profile: true, // 是不是捕获 Webpack 构建的机能信息,用于剖析什么缘由致使构建机能不佳

    cache: false, // 是不是启用缓存提拔构建速率

    watch: true, // 是不是最先
    watchOptions: { // 监听形式选项
    // 不监听的文件或文件夹,支撑正则婚配。默以为空
    ignored: /node_modules/,
    // 监听到变化发作后会等300ms再去实行行动,防备文件更新太快致使从新编译频次太高
    // 默以为300ms 
    aggregateTimeout: 300,
    // 推断文件是不是发作变化是不断的去讯问体系指定文件有无变化,默许每秒问 1000 次
    poll: 1000
  },
}

以上我们就是webpack中大部份的设置项,实在我们能够发明,最主要四个是entryoutputloaderplugin离别代表进口,出口,加载器和插件。详细的设置信息和其他的设置项就不逐一引见了。
发起人人看一下webpack的官方文档,详细相识一下每一个设置项的寄义,就算都记不下来,也最好有点印象。

道理初探

起首我们看一下webpack的团体道理:
初始化参数:从设置文件和 Shell 语句中读取与兼并参数,得出终究的参数;
最先编译:用上一步获得的参数初始化 Compiler 对象,加载一切设置的插件,实行对象的 run 要领最先实行编译;
肯定进口:依据设置中的 entry 找出一切的进口文件;
编译模块:从进口文件动身,挪用一切设置的 Loader 对模块举行翻译,再找出该模块依靠的模块,再递归本步骤直到一切进口依靠的文件都经由了本步骤的处置惩罚;
完成模块编译:在经由第4步运用 Loader 翻译完一切模块后,获得了每一个模块被翻译后的终究内容以及它们之间的依靠关联;
输出资本:依据进口和模块之间的依靠关联,组装成一个个包括多个模块的 Chunk,再把每一个 Chunk 转换成一个零丁的文件到场到输出列表,这步是能够修正输出内容的末了机遇;
输出完成:在肯定好输出内容后,依据设置肯定输出的途径和文件名,把文件内容写入到文件体系。

然后我们再看一下webpack中plugin的道理
在运用htmlWebpackPluin的历程当中,发明打包出的index.html文件,js援用了两次,因为本身相识plugin的道理,因而着手写了一个。
webpack 的插件架构主要基于Tapable完成的,这个Tapable就是专注于事宜的播送和操纵。在webpack的编译历程当中会播送许多事宜,插件能够本身去监听这些事宜,在webpack实行到响应的机遇做某些操纵,然后插件也能够播送事宜。
下面就是详细api的完成了,webpack中有complier对象,代表webpack实例。有编译的详细参数。另有一个complation代表本次编译,有打包的文件等信息。
在complier上面绑定plugin和apply。在回调函数中传入complation对象。

plugins: [
    function () {
        this.plugin('done', (stats) => {
            stats.toJson(true).chunks.filter(c => c.entry).forEach(c => {
                let fileContent = fs.readFileSync((path.join(BUILD_PATH, 'views/main.pug'))).toString('utf-8')
                fs.writeFileSync(path.join(BUILD_PATH, 'views/main.pug'), fileContent.replace(/webpack\-bundle.*src="(.*)"/g, (match, p1) => {
                    return match.replace(p1, PUBLIC_PATH + c.files[0])
                }))
            })
        })
    }
]

常见题目剖析

webpack设置中碰到的题目

css-loader中importLoaders=1参数的题目
题目是加载的css文件中import了一个css文件,虽然能够被引入末了的html中,然则引入的css未经由postcss的处置惩罚,因而加上了这个,就ok了

Mac平台和Windows平台的差别致使的题目

// 设置entry选项时:
entry: {
    main: __dirname + '/src/index.js'
}
// /和\的题目
const path = require('path');
const entryPath = path.resolve(__dirname, '/src/index.js');
entry: {
    main: entryPath
}

不能满足营业需求,自定义plugin的经由
如上

进步webpack构建速率的题目

减少查找文件的局限
应用loader中的excludeinclude
应用reslove中的moudules,这个能够在require时指明寄存第三方模块的途径。

应用动态链接库
应用插件DllPlugin,能够打包出一个个零丁的动态链接库文件。缘由在于包括大批复用模块的动态链接库只须要编译一次,在以后的构建历程当中被动态链接库包括的模块将不会在从新编译,而是直接运用动态链接库中的代码。

开启打包编译多历程
运转在Node.js之上的webpack是单线程模子的,也就是说webpack须要处置惩罚的使命须要一件件挨着做,不能多个事变一同做。应用插件HappyPack,webpack中最耗时的就是loader这一步,HappyPack它把使命剖析给多个子历程去并发的实行,子历程处置惩罚完后再把效果发送给主历程。

提取大众代码
应用CommonsChunkPlugin插件提取大众代码。

用过什么plugin

htmlWebpackPlugin用来自意向html文件中到场js和css的文件引入。
CommonsChunkPlugin能够打包大众部份代码(据说4.0已不必了)。
HappyPack开启多历程,加速打包速率。

    原文作者:bradwang
    原文地址: https://segmentfault.com/a/1190000013675022
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞