Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding license header from external file in Webpack

I have an external license file called "LICENSE", and the webpack.BannerPlugin. I could copy/paste the contents of LICENSE into the string field for the BannerPlugin;. But it's big, and ugly.

It would be much cleaner if I could use a text or raw loader instead: BannerPlugin(require("raw!./LICENSE"))

When I try this I get "Error: Cannot find module 'raw!./LICENSE'", presumably because require hasn't been configured early enough. Is there a way to do what I'm trying? I've searched quite a bit and keep coming back to putting the entire license string into the BannerPlugin conf.

Edit: adding my basic webpack.config file:

// webpack.config.js
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./dev/main.js",
  devtools: "source-map",
  output: {
    path: "./bin",
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("bundle.css"),
    new webpack.BannerPlugin("Copyright 2016 Adam Mooz.  Released under the MIT license"),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true
    }),
    new HtmlWebpackPlugin({
      title: "Grocery List",
      hash: true
    })
  ]
};
like image 526
Adam Mooz Avatar asked Jan 18 '16 02:01

Adam Mooz


1 Answers

@zerkms provided the answer: use nodejs's FS api. By using defining fs to be var fs = require("fs");, I was able to then use fs.readFileSync to read the file in. webpack.BannerPlugin(fs.readFileSync('./LICENSE', 'utf8'))

My new wepack file looks like:

// webpack.config.js
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var fs = require("fs");

module.exports = {
  entry: "./dev/main.js",
  devtools: "source-map",
  output: {
    path: "./bin",
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("bundle.css"),
    new webpack.BannerPlugin(fs.readFileSync('./LICENSE', 'utf8')),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true
    }),
    new HtmlWebpackPlugin({
      title: "Grocery List",
      hash: true
    })
  ]
};
like image 94
Adam Mooz Avatar answered Sep 21 '22 11:09

Adam Mooz