Webpack configuration for CanJS

readme.md

Using Webpack with CanJS

This is a good starting Webpack configuration, but will need to be adjusted to work well in production.

Instructions

1. Create webpack.config.js in the root of your project. (Refer to the Webpack CLI docs to learn how to customize this))
2. Install dependencies: npm install webpack webpack-dev-server can-stache-loader svg-inline-loader style-loader less-loader less --save-dev

webpack.config.js

const path = require('path')
const webpack = require('webpack')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'webpack.production.js',
    path: path.join(__dirname, 'dist')
  },
  devtool: 'cheap-module-eval-source-map',
  resolve: {
    alias: {
      '~': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.stache$/,
        use: {
          loader: 'can-stache-loader'
        }
      },
      {
        test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
        loader: 'url-loader'
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: 'style-loader' // creates style nodes from JS strings
        }, {
          loader: 'css-loader' // translates CSS into CommonJS
        }, {
          loader: 'less-loader' // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [ 'file-loader' ]
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  devServer: {
    hot: true,
    historyApiFallback: true
  }
}