webpack模板

原创
2017/08/13 16:07
阅读数 69
'use strict';

// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer-core');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin')
var path = require('path')


var config = {};


config.entry = {
  app: './src/app.js',
  vendor:['angular', 'angular-animate', 'jquery', '@uirouter/angularjs']
}

config.output = {
  // target directory for all output files
  // must be absolute path
  path: __dirname + '/build',

  // the url to the output directory resolved relative to the HTML page
  // Uses webpack-dev-server in development
  publicPath: '/',

  // filename template for entry chunks
  filename: '[name].[hash].js',
}

config.devtool = 'eval';


// Initialize module
config.module = {
  rules: [{
    test: /\.js$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          optional: 'runtime'
        }
      }
    ],
    exclude: /node_modules/
  }, {
    test: /\.(png|jpg|gif)$/, 
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    ]
  }, {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: "application/font-woff"
          }
        }
      ]
  }, {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      use: [
        {
          loader: 'file-loader'
        }
      ]
  }, {
    test: /\.html$/,
    use: [
      {
        loader: 'raw-loader'
      }
    ]
  }, {
    test: /\.(less|css)$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'less-loader']
    })
  }]
};

config.devServer = {
  // static file location for devServer
  contentBase: path.join(__dirname, '/build'),
  hot: true,
  port: 9000
}

config.plugins = [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'src/index.html',
    inject: 'body'
  }),
  new ExtractTextPlugin('style.css'),
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: 2
  }),
  new CleanWebpackPlugin(
    ['build'], // delete bib directory before every build
    {
      root: __dirname, // root directory
      verbose: true,   // display console infomation
    }
  )
]
module.exports = config 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部