webpack 遇到问题总结

webpack src/main.js dist/bundle.js

internal/modules/cjs/loader.js:582

 报错的原因，就是什么环境配置的问题。

首先电脑上先安装了node.js，然后又安装了nvm，安装nvm没有卸载，并且安装路径有问题，并不是中文的问题。而是文件夹的空格。

安装nvm的路径是E:\Program Files (x86)\nvm。出现了非常多莫名其妙的问题，虽然解决了，但是必须将需要编译的文件放入node_modules下，让人感到不爽。

选择重新装node，nrm，nvm，webpack。

webpack : 无法加载文件 E:\Node\nvm\node_global\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

把 后缀带有.ps1的文件全部删除即可。

PS E:\MyHTML\webpage-study> webpack ./src/main.js ./dist/budle.js

assets by status 88.3 KiB [cached] 1 asset

runtime modules 663 bytes 3 modules

cacheable modules 281 KiB

  ./src/main.js 213 bytes [built] [code generated]

  ./node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]

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.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main

Module not found: Error: Can't resolve './dist/budle.js' in 'E:\MyHTML\webpage-study'

resolve './dist/budle.js' in 'E:\MyHTML\webpage-study'

  using description file: E:\MyHTML\webpage-study\package.json (relative path: .)

    Field 'browser' doesn't contain a valid alias configuration

    using description file: E:\MyHTML\webpage-study\package.json (relative path: ./dist/budle.js)

      no extension

        Field 'browser' doesn't contain a valid alias configuration

        E:\MyHTML\webpage-study\dist\budle.js doesn't exist

      .js

        Field 'browser' doesn't contain a valid alias configuration

        E:\MyHTML\webpage-study\dist\budle.js.js doesn't exist

      .json

        Field 'browser' doesn't contain a valid alias configuration

        E:\MyHTML\webpage-study\dist\budle.js.json doesn't exist

      .wasm

        Field 'browser' doesn't contain a valid alias configuration

        E:\MyHTML\webpage-study\dist\budle.js.wasm doesn't exist

      as directory

        E:\MyHTML\webpage-study\dist\budle.js doesn't exist

webpack 5.24.2 compiled with 1 error and 1 warning in 2879 ms

原因版本太新，必须使用 -o 命令

webpack ./src/main.js -o ./dist/bundle.js

又一个版本太新的问题，webpack-dev-server使用

PS E:\MyHTML\webpage-study> npm run dev

> [email protected] dev E:\MyHTML\webpage-study

> webpack-dev-server

E:\Node\nvm\node_global\webpack:2

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

          ^^^^^^^

SyntaxError: missing ) after argument list

    at wrapSafe (internal/modules/cjs/loader.js:979:16)

    at Module._compile (internal/modules/cjs/loader.js:1027:27)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

    at Module.load (internal/modules/cjs/loader.js:928:32)

    at Function.Module._load (internal/modules/cjs/loader.js:769:14)

    at Module.require (internal/modules/cjs/loader.js:952:19)

    at require (internal/modules/cjs/helpers.js:88:18)

    at Object.<anonymous> (E:\MyHTML\webpage-study\node_modules\webpack-dev-server\bin\webpack-dev-server.js:12:17)

    at Module._compile (internal/modules/cjs/loader.js:1063:30)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! [email protected] dev: `webpack-dev-server`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] dev 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!     E:\Node\nvm\node_cache\_logs\2021-02-25T14_59_42_989Z-debug.log

PS E:\MyHTML\webpage-study> npm install html-webpack-plugin --save

npm WARN [email protected] No description

npm WARN [email protected] No repository field.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]

added 44 packages from 59 contributors in 11.559s

25 packages are looking for funding

  run `npm fund` for details

 package.json配置

{
  "name": "webpage-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1",
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}
           

后面配置下面几个东西后，问题变成了

{
  "name": "webpage-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "^5.2.0",
    "jquery": "^3.5.1",
    "webpack": "^5.24.2"
  },
  "devDependencies": {
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.0"
  }
}
           

PS E:\MyHTML\webpage-study> npm run dev

> [email protected] dev E:\MyHTML\webpage-study

> webpack-dev-server

internal/modules/cjs/loader.js:883

  throw err;

  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'

Require stack:

- E:\MyHTML\webpage-study\node_modules\webpack-dev-server\bin\webpack-dev-server.js

    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)

    at Function.Module._load (internal/modules/cjs/loader.js:725:27)

    at Module.require (internal/modules/cjs/loader.js:952:19)

    at require (internal/modules/cjs/helpers.js:88:18)

    at Object.<anonymous> (E:\MyHTML\webpage-study\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)

    at Module._compile (internal/modules/cjs/loader.js:1063:30)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

    at Module.load (internal/modules/cjs/loader.js:928:32)

    at Function.Module._load (internal/modules/cjs/loader.js:769:14)

    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {

  code: 'MODULE_NOT_FOUND',

  requireStack: [

    'E:\\MyHTML\\webpage-study\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'

  ]

}

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! [email protected] dev: `webpack-dev-server`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] dev 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!     E:\Node\nvm\node_cache\_logs\2021-02-25T15_22_07_688Z-debug.log

最后将webpack-cli版本降下来解决问题。

    "webpack-cli": "^4.5.0"     →    "webpack-cli": "^3.3.12",

最后这几个就是博主使用的所有插件配置。

package.json

{
  "name": "webpage-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.4.1",
    "html-webpack-plugin": "^5.2.0",
    "jquery": "^3.5.1",
    "mint-ui": "^2.2.13",
    "popper.js": "^1.16.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vuex": "^3.6.2",
    "webpack": "^5.24.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "moment": "^2.29.1",
    "node-sass": "^5.0.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue-resource": "^1.5.2",
    "vue-router": "^3.5.1",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.24.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}
           

webpack.config.js

const path = require('path')

const webpack = require('webpack')

const htmlWebpackPlugin = require('html-webpack-plugin')
// vue 15以上版本需要额外配置
const vueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: path.resolve(__dirname, "./src/main.js"), //已多次提及的唯一入口文件 
    output: {
        path: path.resolve(__dirname, "./dist"), //打包后的文件存放的地方 
        filename: "bundle.js" //打包后输出文件的文件名 
    },
    devServer: {
        open: true, // 自动打开浏览器
        port: 3000, // 设置启动时候的运行端口
        contentBase: 'src', // 指定托管的根目录
        hot: true // 启用热更新 的 第1步
    },
    plugins: [ // 配置插件的节点
        new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
        new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
            template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
            filename: 'index.html' // 指定生成的页面的名称
        }),
        new vueLoaderPlugin()
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, //  配置处理 .css 文件的第三方loader 规则
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, //配置处理 .less 文件的第三方 loader 规则
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }, // 配置处理 .scss 文件的 第三方 loader 规则
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                // 新版本无法适用
                // use: 'url-loader?=limit=1080&name=[hash:8]-[name].[ext]'
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1080, // 限制大图片以base64传输，小图片以原数据传输
                        name: '[hash:8]-[name].[ext]', // 配置生成图片的名称
                        // 不启用ES6语法
                        esModule: false
                    }
                }]
            }, // 处理图片路径的loader
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            }, // 处理 字体文件的 loader 
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }, // 配置 Babel 来转换高级的ES语法
            {
                test: /\.vue$/,
                use: 'vue-loader'
            } // 处理 .vue 文件的 loader
        ]
    },
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
            "vue$": "vue/dist/vue.js"
        }
    }
}