课件和源代码下载地址

精选留言(16)

• 

  Geek_10ebab

  看到留言里面多次提到JS没有 contenthash，想问下为什么JS没有，而css文件却有呢？

  2019-06-25

   1

   2
• 

  奔奔

  老师，我的js里面使用contenthashbuild成功了
  'use strict';
  
  const path = require('path');
  const webpack = require('webpack');
  
  
  console.log(__dirname, 'dist');
  console.log(path.join(__dirname, 'dist'));
  // __dirname 当前目录 /remaineey/workspace/webpack
  module.exports = {
      entry: './src/index.js', // 单入口
      entry: { // 多入口
          index: './src/index.js',
          search: './src/search.js',
      },
      output: {
          path: path.join(__dirname, 'dist'),
          filename: '[name][contenthash:8].js',
      },
      mode: 'development',
      module: {
          rules: [
              { test: /\.js$/, use: 'babel-loader' },
              {
                  test: /\.css$/,
                  use: [
                      'style-loader',
                      'css-loader',
                  ]
              },
              {
                  test: /\.less$/,
                  use: [
                      'style-loader',
                      'css-loader',
                      'less-loader'
                  ]
              },
              {
                  test: /\.(jpeg|png|jpg)$/,
                  use: [
                      {
                          loader: 'url-loader',
                          options: {
                              limit: 333330,
                          }
                      }
                  ]
              }
          ]
      },
      // 默认是false，不开启
      // 参考： https://www.webpackjs.com/configuration/watch/
      // watch: true,
      // // 只有开启监听模式时，watch才有意义
      // watchOptions: {
      // // 不监听的文件或者文件目录，支持正则匹配
      // ignored: /node_modules/,
      // // 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位
      // aggregateTimeout: 300,
      // // 通过传递 true 开启 polling，或者指定毫秒为单位进行轮询。
      // poll: 1000 // 每秒检查一次变动
      // },
      // 热替换影响了chunkhash的使用，你要确保hotModuleReplacementPlugin(）函数没在生产环境下执行
      // plugins: [
      // new webpack.HotModuleReplacementPlugin()
      // ],
      devServer: {
          contentBase: './dist',
          hot: true
      }
  };

  2019-07-23

  

   1
• 

  赵健

  老师 ，你好，我好奇，同样的代码，同样的webpack 配置，同样的node ,npm版本，在不同的操作系统，windows 和 linux下，打包出来的 hash 是不是一样的

  2019-07-14

   1

   1
• 

  翰弟

  都用contentHash有什么问题么

  作者回复: js 里面没有 contenthash 哈，图片和 css 直接用这个也是可以的

  2019-06-05

   1

   1
• 

  Tencx

  对于chunkhassh 还是有问题的, 当我们的 entry 文件发生改变（新增或删除）的时候，原先的 chunks ID 就有可能发生变化, 所以, 建议用HashedModuleIdsPlugin根据路径生成hashid

  2019-06-02

   2

   1
• 

  KaKa

  你好 请问已经在项目环境中了 为啥 每回都要code . 一下啊？ 不太懂。能私回我吗？感觉问的太白痴，可是不问又不知道

  作者回复: code . 这个就是在命令行里打开 vscode 哈，你可以在 vscode 里把 code 加入到环境变量里去

  2019-05-31

   1

   1
• 

  谭低调

  使用hash的场景还应该结合mode来考略，如果mode是development的时候，在使用hmr的情况下，chunk使用chunkhash是不适合的，应该使用hash。而在mode是production的时候，就是不用hmr的情况下，这时候就适合使用chunkhash了

  2019-12-12

  

  
• 

  刘先森

  经过亲自实验，发现如果output name 设置为 [chunkhash:8] 就会报错
  
  错误信息如下：
  
  ERROR in chunk index [entry]
  [name]_[chunkhash:8].js
  Cannot use [chunkhash] or [contenthash] for chunk in '[name]_[chunkhash:8].js' (use [hash] instead)
  
  ERROR in chunk search [entry]
  [name]_[chunkhash:8].js
  Cannot use [chunkhash] or [contenthash] for chunk in '[name]_[chunkhash:8].js' (use [hash] instead)
  
  如果修改为 filename: '[name]_[hash:8].js' 正常，
  
  所以
  
  像图片，字体文件，css文件是不是应该是contenthash
  
  js文件应该是 filename: '[name]_[hash:8].js'

  2019-10-26

   2

  
• 

  安静

  老师，能不能解释一下webpack是以什么规则分chunk的呢？是一个入口一个chunk ，然后静态资源各一个吗？但是我看项目打包出来还有其他的

  2019-10-17

  

  
• 

  Geek_036999

  老师这个报错是什么原因：
  webpack-dev-server --config webpack.dev.js --open
  
  i ｢wds｣: Project is running at http://localhost:8080/
  i ｢wds｣: webpack output is served from /
  i ｢wds｣: Content not from webpack is served from D:\A项目-project\demo\my-project\dist
  events.js:174
        throw er; // Unhandled 'error' event
        ^
  

  2019-08-24

  

  
• 

  fy

  可以每次把相应的文档复制链接给我们们，每次讲课的内容，麻烦发下webpack相应部分的链接

  2019-07-25

  

  
• 

  奔奔

  js里面是不是也是可以有contenthash的？只不过需要注意的是
  热替换会影响影响contenthash 和 chunkhash的使用
  

  2019-07-23

  

  
• 

  喝旺仔的小哥

  按照老师的写的，加入MiniCssExtractPlugin后报了这个错：
  > my-project@1.0.0 build C:\Users\HP\Desktop\my-project
  > webpack --config webpack.prod.js
  
  Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
   - configuration has an unknown property 'plugin'. These properties are valid:
     object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
     For typos: please correct them.
     For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
       Loaders should be updated to allow passing options via loader options in module.rules.
       Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
       plugins: [
         new webpack.LoaderOptionsPlugin({
           // test: /\.xxx$/, // may apply this only for some modules
           options: {
             plugin: …
           }
         })
       ]
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! my-project@1.0.0 build: `webpack --config webpack.prod.js`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the my-project@1.0.0 build script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR! C:\Users\HP\AppData\Roaming\npm-cache\_logs\2019-07-14T03_39_18_270Z-debug.log
  

  2019-07-14

   1

  
• 

  Populus alba

  试了下，图片使用 hash 指纹，并非整个项目 hash（contenthash、chunkhash)发生改变。
  多入口时，只影响引入图片的 entry 文件、相关的 css 文件。
  ？？？
  

  作者回复: 视频里也说了图片的hash和css/js资源的hash概念不一样，图片的hash是由图片内容决定的。
  
  如果css/js都是使用hash作为文件指纹的话，那么某一个js或者css发生改变，所有打包出来的css/js指纹都会变化。

  2019-07-06

  

  
• 

  时间小鱼

  我看了下文档，发现文档中针对 js 文件也使用了 contenthash，并非不能使用 https://webpack.js.org/guides/caching/

  2019-06-24

  

  
• 

  朱潇伟

  js为什么不也用contenthash

  作者回复: 因为JS 没有 contenthash，只能从chunkhash和hadh里面选。但是hash对于js的含义是整个构建的文件指纹，每次构建有任何文件变了这个值都会变。所以js只能用chunkhash

  2019-06-10

  

  