webpack配置踩坑笔记

我package.json.js中的scripts配置：

"scripts": {
     
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  }

1.运行npm run build时TypeError: Cannot destructure property ‘createHash’ of ‘undefined’ or ‘null’. at Object.

出现这一问题是因为webpack的版本问题，我出现这个问题时webpack的版本是webpack的版本是4.28.1，使用cnpm i webpack@^4.3.0后就可以正常运行了
github上有相关的讨论：https://github.com/webpack-contrib/mini-css-extract-plugin/issues/69

2.运行run npm build时D:\node.js\node_global\webpack-cli:2basedir=$(dirname"$(echo “$0” | sed -e ‘s,\,/,g’)") SyntaxError: missing ) after argument list

这个问题看似是在文件中少了一个括号，但是实际上是因为本地项目没有安装对应的包，这里在本地安装即可cnpm i -D webpack-cli

3. TypeError: CleanWebpackPlugin is not a constructor at Object.

出现这个问题一般是因为导入CleanWebpackPlugin 错误

我本来导入的代码

const CleanWebpackPlugin = require('clean-webpack-plugin');

但是查看github中的文档中的用法

const {
      CleanWebpackPlugin } = require('clean-webpack-plugin');

const webpackConfig = {
     
    plugins: [
        /**
         * All files inside webpack's output.path directory will be removed once, but the
         * directory itself will not be. If using webpack 4+'s default configuration,
         * everything under /dist/ will be removed.
         * Use cleanOnceBeforeBuildPatterns to override this behavior.
         *
         * During rebuilds, all webpack assets that are not used anymore
         * will be removed automatically.
         *
         * See `Options and Defaults` for information
         */
        new CleanWebpackPlugin(),
    ],
};

module.exports = webpackConfig;

可以看到实际的用法应该是

const {
      CleanWebpackPlugin } = require('clean-webpack-plugin')
// 或者
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin

去网上找了找源码，可以明显看出导出的是CleanWebpackPlugin，所以必须使用CleanWebpackPlugin这个名字

declare class CleanWebpackPlugin {
     
    private readonly dry;
    private readonly verbose;
    private readonly cleanStaleWebpackAssets;
    private readonly protectWebpackAssets;
    private readonly cleanAfterEveryBuildPatterns;
    private readonly cleanOnceBeforeBuildPatterns;
    private readonly dangerouslyAllowCleanPatternsOutsideProject;
    private currentAssets;
    private initialClean;
    private outputPath;
    constructor(options?: Options);
    apply(compiler: Compiler): void;
    /**
     * Initially remove files from output directory prior to build.
     *
     * Only happens once.
     *
     * Warning: It is recommended to initially clean your build directory outside of webpack to minimize unexpected behavior.
     */
    handleInitial(compilation: Compilation): void;
    handleDone(stats: Stats): void;
    removeFiles(patterns: string[]): void;
}
export {
      CleanWebpackPlugin };

4. ERROR in ./src/main.less Module build failed: ModuleBuildError: Module build failed: Error: No PostCSS Config found in:

出现这个错误的原因是没有postcss的配置文件
在根目录新建postcss.config.js，并在里面写入配置即可
配置举例

const autoprefixer = require("autoprefixer")
module.exports = {
     
    plugins: [autoprefixer]
}

5. 执行npm run dev时Error: Cannot find module ‘webpack-cli/bin/config-yargs’

造成这个错误的原因是webpack和webpack-dev-server版本不匹配，执行下面两句

cnpm i -D webpack
cnpm i -D webpack-dev-server

问题解决