Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Npm run start - Source files which are compiled via copy-webpack-plugin are not copied/rendered to build. #85

Open
zenzjtech opened this issue Aug 29, 2020 · 1 comment

Comments

@zenzjtech
Copy link

zenzjtech commented Aug 29, 2020

Hello,
Context

  • Npm run build: OK.
  • Npm run start: All the source files which are compiled via copy-webpack-plugin the options.plugins are not rendered/copied to build directory whenever there is a HOT RELOAD. In the first run, the result is as expected.
    Example: Manifest.json.

FYT: My webpack.config.js

var webpack = require("webpack"),
  path = require("path"),
  fileSystem = require("fs"),
  env = require("./utils/env"),
  CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin,
  CopyWebpackPlugin = require("copy-webpack-plugin"),
  HtmlWebpackPlugin = require("html-webpack-plugin"),
  WriteFilePlugin = require("write-file-webpack-plugin");

// load the secrets
var alias = {};

var secretsPath = path.join(__dirname, ("secrets." + env.NODE_ENV + ".js"));

var fileExtensions = ["jpg", "jpeg", "png", "gif", "eot", "otf", "svg", "ttf", "woff", "woff2"];

if (fileSystem.existsSync(secretsPath)) {
  alias["secrets"] = secretsPath;
}

var options = {
  mode: process.env.NODE_ENV || "development",
  entry: {
    popup: path.join(__dirname, "src", "js", "popup.js"),
    options: path.join(__dirname, "src", "js", "options.js"),
    background: path.join(__dirname, "src", "js", "background", "index.js"),
    contentScript: path.join(__dirname, "src", "js", "content-scripts", "index.js")
  },
  chromeExtensionBoilerplate: {
    notHotReload: ["contentScript"]
  },
  output: {
    path: path.join(__dirname, "build"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader",
        exclude: /node_modules/
      },
      {
        test: new RegExp('\.(' + fileExtensions.join('|') + ')$'),
        loader: "file-loader?name=[name].[ext]",
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: alias,
    extensions: fileExtensions.map(extension => ("." + extension)).concat([".jsx", ".js", ".css"]),
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
  plugins: [
    // clean the build folder
    new CleanWebpackPlugin(),
    // expose and write the allowed env vars on the compiled bundle
    new webpack.EnvironmentPlugin(["NODE_ENV"]),
    new CopyWebpackPlugin([{
      from: "src/manifest.json",
      transform: function (content, path) {
        // generates the manifest file using the package.json informations
        return Buffer.from(JSON.stringify({
          description: process.env.npm_package_description,
          version: process.env.npm_package_version,
          ...JSON.parse(content.toString())
        }))
      }
    }]),
    new CopyWebpackPlugin([{
      from: 'src/css/inject.css',
      to: 'inject.css',
      toType: 'file'
    }]),
    new CopyWebpackPlugin([{
      from: 'src/js/content-scripts/captureXHRResponse.js',
      to: 'captureXHRResponse.js',
      toType: 'file'
    }]),
    new CopyWebpackPlugin([{
      from: 'src/img/download.png',
      to: 'download.png',
      toType: 'file'
    }]),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "popup.html"),
      filename: "popup.html",
      chunks: ["popup"]
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "options.html"),
      filename: "options.html",
      chunks: ["options"]
    }),
    new WriteFilePlugin()
  ]
};

/*if (env.NODE_ENV === "development") {
  options.devtool = "cheap-module-eval-source-map";
}*/
options.devtool = "cheap-module-eval-source-map";

module.exports = options;

Node version: 12.x

@zenzjtech
Copy link
Author

My solution for anyone whom concerns:

  • Remove the clean plugin from webpack.config.js here
  • Remember to add it again in the utils/build.js script.
var webpack = require("webpack"),
	CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin,
	config = require("../webpack.config");


config.plugins = [
	// clean the build folder
	new CleanWebpackPlugin(),
].concat(config.plugins);

webpack(
	config,
	function (err) { if (err) throw err; }
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant