Skip to content

CSS bundling

jiyinyiyong edited this page Nov 7, 2017 · 1 revision

Since there's not need of CSS, it's limited to <style /> usages. Old configs are:

webpack.dev.coffee

path = require 'path'
resolve = require('path').resolve
webpack = require 'webpack'

module.exports =
  entry:
    main: './entry/dev'
  devServer:
    clientLogLevel: 'info'
    stats: 'errors-only'
    contentBase: resolve(__dirname, 'target')
    publicPath: '/'
    host: '0.0.0.0'
    disableHostCheck: true
  output:
    filename: '[name].js'
  module:
    rules: [
      test: /\.css$/
      loaders: ['style-loader', 'css-loader']
    ,
      test: /\.(eot|svg|ttf|jpg|woff2?)(\?.+)?$/
      loader: 'url-loader'
      query:
        limit: 100
        name: 'fonts/[name].[ext]'
    ]
  plugins: [
    new webpack.HotModuleReplacementPlugin()
    new webpack.NamedModulesPlugin()
  ]

webpack.release.coffee

path = require 'path'
webpack = require 'webpack'
ManifestPlugin = require 'webpack-manifest-plugin'
UglifyJSPlugin = require 'uglifyjs-webpack-plugin'
ExtractTextPlugin = require 'extract-text-webpack-plugin'

module.exports =
  entry:
    main: './entry/release'
  output:
    path: path.join(__dirname, './dist/')
    filename: '[name].[chunkhash:8].js'
  devtool: 'source-map'
  module:
    rules: [
      test: /\.css$/
      loader: ExtractTextPlugin.extract
        fallback: 'style-loader'
        use: 'css-loader'
    ,
      test: /\.(eot|svg|ttf|jpg|woff2?)(\?.+)?$/
      loader: 'url-loader'
      query:
        limit: 100
        name: 'fonts/[hash:8].[ext]'
    ,
      test: /\.js$/
      loader: 'source-map-loader'
      options: { enforce: 'pre' }
    ]
  plugins: [
    new ExtractTextPlugin('[name].[chunkhash:8].css')
    new UglifyJSPlugin sourceMap: true
    new ManifestPlugin
      fileName: 'webpack-manifest.json'
  ]
Clone this wiki locally