Блог

Я компилирую приложение ColdFusion с помощью WebPack, и, похоже, все компилируется просто отлично. Как вы можете видеть из приведенной ниже конфигурации, я также пытаюсь включить HTML-файл в папку dist и убедиться, что он вызывается при отображении приложения.

 const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: {
    vendor: "./src/vendor.js",
    main: "./src/index.js"
  },  
  output: {
    filename: "[name].[contenthash].bundle.js",
    path: path.resolve(__dirname, "dist")
  },

  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/template.cfm",
      filename: "index.cfm",
      minify: false
    }),
    new HtmlWebPackPlugin({
        template: "./src/help.html",
        filename: "help.html",
    }),  
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*', '!application.cfc']
    })
  ],

  module: {
    rules: [
            {
                test: /.html$/,
                use: ["html-loader"],
            },      
            {
                test: /.css$/,
                use: [
                    "style-loader", //3. inject styles into dom
                    "css-loader", //2. turns css into common js
                ],
            },
            {
                test: /.scss$/,
                use: [
          "style-loader", 
          "css-loader", 
          "sass-loader"
        ],
            }
    ]
  }  
};
  

Это файл ошибки, который я получаю:

 0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\Program Files\nodejs\node.exe',
1 verbose cli   'C:\Users\jlnewnam\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v12.18.4
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle create-webpack-app@1.0.0~prestart: create-webpack-app@1.0.0
6 info lifecycle create-webpack-app@1.0.0~start: create-webpack-app@1.0.0
7 verbose lifecycle create-webpack-app@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle create-webpack-app@1.0.0~start: PATH: C:UsersjlnewnamAppDataRoamingnpmnode_modulesnpmnode_modulesnpm-lifecyclenode-gyp-bin;V:AppHomewwwrootjaredstudio_webpacknode_modules.bin;C:Program FilesGitmingw64bin;C:Program FilesGitusrbin;C:Usersjlnewnambin;C:Program Files (x86)Common FilesOracleJavajavapath;C:ProgramDataOracleJavajavapath;C:Program FilesPython36Scripts;C:Program FilesPython36;C:WINDOWSsystem32;C:WINDOWS;C:WINDOWSSystem32Wbem;C:WINDOWSSystem32WindowsPowerShellv1.0;C:WINDOWSSystem32OpenSSH;C:Program FilesPuTTY;C:Program Files (x86)Microsoft SQL Server150DTSBinn;%JAVA_HOME%;C:Program FilesGitcmd;C:Program FilesMicrosoft SQL Server130ToolsBinn;C:Program FilesMicrosoft SQL ServerClient SDKODBC170ToolsBinn;C:Program Filesnodejs;C:Program Filesdotnet;C:UsersjlnewnamAppDataLocalMicrosoftWindowsApps;C:UsersjlnewnamAppDataLocalProgramsMicrosoft VS Codebin;C:UsersjlnewnamAppDataLocalProgramsMicrosoft VS Code Insidersbin;%JAVA_HOME%;C:UsersjlnewnamAppDataRoamingnpm;C:Program Files (x86)GitHub CLI;C:Usersjlnewnam.dotnettools
9 verbose lifecycle create-webpack-app@1.0.0~start: CWD: V:AppHomewwwrootjaredstudio_webpack
10 silly lifecycle create-webpack-app@1.0.0~start: Args: [ '/d /s /c', 'webpack --config webpack.dev.js' ]
11 silly lifecycle create-webpack-app@1.0.0~start: Returned: code: 1  signal: null
12 info lifecycle create-webpack-app@1.0.0~start: Failed to exec start script
13 verbose stack Error: create-webpack-app@1.0.0 start: `webpack --config webpack.dev.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:UsersjlnewnamAppDataRoamingnpmnode_modulesnpmnode_modulesnpm-lifecycleindex.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:UsersjlnewnamAppDataRoamingnpmnode_modulesnpmnode_modulesnpm-lifecyclelibspawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid create-webpack-app@1.0.0
15 verbose cwd V:AppHomewwwrootjaredstudio_webpack
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\jlnewnam\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "start"
18 verbose node v12.18.4
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error create-webpack-app@1.0.0 start: `webpack --config webpack.dev.js`
22 error Exit status 1
23 error Failed at the create-webpack-app@1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
  

Как прокомментировано здесь:

 module.exports = {

  entry: {
    index: './src/index.js'
  },

  // ...

  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
        inject: true,
        chunks: ['index'],
        filename: 'index.html'
    }),
  ]
};
  

Выше мы повторно index.js используем file на каждой странице, chunks: [‘index’] чтобы изменить это, просто добавьте новые файлы Javascript about.js
contacts.js , затем используйте их в конфигурации ввода и ссылайтесь на них в
HtmlWebpackPlugin параметрах конфигурации:

 //...
entry: {
    index: './src/index.js',
    about: './src/about.js', 
    contacts: './src/contacts.js'
},
//...
plugins: [
  new HtmlWebpackPlugin({
      template: './src/about.html',
      inject: true,
      chunks: ['about'],
      filename: 'about.html'
  }),
  

Итак, вам нужно объявить в entry используемых фрагментах plugins .