小程序工程化实践及常见应用场景，原生如何小程序搭配webpack1.Invalid options object. Co

踩坑记录

1.Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema. - options[0] misses the property 'patterns'.

CopyWebpackPlugin自从6.0以后就修改了配置，导致新版需要这样使用。尽管第一反应是去看官方文档（好习惯），但是跑去webpack官网里看旧版本插件部分，导致没有得到直接答案，应该去npm/github看最新的文档。

new CopyWebpackPlugin(
  patterns:
    [
      { from: path.resolve(__dirname, './src/assets/') }
    ]
  ),
)

2.Cannot assign to read only property 'exports' of object '[object Object]' 大致是说，在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。

解决办法有两种：一、统一改成ES6的方式编写即可. 二、添加插件

npm install --save-dev @babel/plugin-transform-modules-commonjs

在项目根目录新增.babelrc文件，并在文件中加入

{
	"plugins": ["@babel/plugin-transform-modules-commonjs"]
}

3.Cannot read property 'webpackJsonp' of undefined 在输出 output 部分有个坑：因为小程序使用的是 global，所以必须添加配置 output.globalObject 为 global。

 output: {
    ...
+   globalObject: 'global'
}

4.WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.使用webpack4打包时，运行npm run build:结果报错，提示webpack打包后的生成文件和入口文件体积过大，超过了默认值。

解决方案：

// webpack.config.js
module.exports = {
	...
    performance: {
            hints: 'warning', // 枚举 false关闭
        	maxEntrypointSize: 50000000, // 最大入口文件大小（以字节为单位 500k）
        	maxAssetSize: 30000000, // 最大资源文件大小（以字节为单位 300k）
            assetFilter: function(assetFilename) { //只给出js文件的性能提示
                 return assetFilename.endsWith('.js');
            }
    }
}

将入口文件和资源文件最大值调大就不会报错了，或者使用以下将hints设为false，为关闭性能提示。

    performance: {
  		hints: false
    }

5.打包之后，整个小程序项目文件的体积增大了不少，如何优化？

解决方法：

1.首先通过 npx webpack --mode=production 设置生产模式，webpack4.0以上版本会自动执行tree shaking机制，移除哪些我们从来没有使用过的方法。 2.提取第三方库，通过npm安装。（h5老版本可以在webpack中设置webpack.optimize.CommonsChunkPlugin，新版本可以使用WebpackDLL用法，或者通过引入cdn链接在页面中）

6.webpack打包的时候98%就停住，其实正在后台编译，但是这时候不打印编译信息，只有全部编译好才会抛出编译信息，如何一点一点出来呢？

解决方法：

7.如何实现webpack图片缓存呢？

解决方法：对于图片、字体等静态资源，在使用webpack构建提取时，其实是使用了file-loader来完成的，生成对应的文件hash值也就是由对应的file-loader来计算的。那么这些静态文件的hash值使用的是什么hash值呢，其实就是hash属性值。

module.exports = {
 ...
 rules: [
   ...
    {
      test: /\.(gif|png|jpe?g)(\?\S*)?$/,
      loader: require.resolve('url-loader'),
      options: {
        limit: 10000,
        name: path.posix.join('static',  '[name]_[hash:7].[ext]')
      }
    },
    font: {
      test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
      loader: require.resolve('url-loader'),
      options: {
        limit: 10000,
        name: path.posix.join('static', '[name]_[hash:7].[ext]')
      }
    }
 ]
}

可以看到上面使用的是hash属性值，此hash非webpack每次项目构建的hash，它是由file-loader根据文件内容计算出来的，不要误认为是webpack构建的hash。

参考文章

文章发布于 2019 年 8 月 18 日