webpack-new.config.js

/**
 * Created by cycold on 5/11/16.
 */
const path = require('path')
const webpack = require('webpack')

//https://github.com/webpack/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin")

// https://github.com/ampedandwired/html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

// https://github.com/postcss/postcss-loader
const precss       = require('precss')
const autoprefixer = require('autoprefixer')

const production = process.env.NODE_ENV === 'production'

// entry file path must be a relative path
let entry = {
  // 使用webpack-hot-middleware/client?http://0.0.0.0:7070/ 保证修改后自动刷新Automatic Refresh 注意 和 Hot Module Replacement 区分
  // 如果没有使webpack-hot-middleware/client?http://0.0.0.0:7070/ 时,当非模块(module)文件更新时,不会自动刷新,但是当module有更新时,会自动刷新
  // 参考: http://webpack.github.io/docs/webpack-dev-server.html#automatic-refresh
  login: ['./src/pages/login/index', 'webpack-hot-middleware/client?http://0.0.0.0:7070/'],
  main: ['./src/pages/main/index', 'webpack-hot-middleware/client?http://0.0.0.0:7070']
}

// webpack plugins
let plugins = [
  // 提取各个chunk中共同的依赖(包括js,css)到一个文件中,这里提取共有的样式到common.css文件,共有的js到commons.js中
  // http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
  new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"),

  // 抽取样式到单个文件中 http://webpack.github.io/docs/stylesheets.html
  // The ExtractTextPlugin generates an output file per entry, so you must use [name], [id] or [contenthash]
  // when using multiple entries.
  new ExtractTextPlugin("[name].css", {
    allChunks: false, // 设置false,对于多个入口,每个入口里的所有css都会打包成一个文件(每个入口一个文件),
                      // 设置为true,那么就是所有的入口中的css都会打包成一个文件(所有入口共用一个文件)
    disable: true    // 是否禁用此插件
  }),

  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({  // for login page
		 chunks: ['login','commons'],
		 title: 'login page',
		 filename: 'login.html',
		 template: path.join(__dirname, 'src/pages/login/index.tpl.html'),
		 favicon: path.join(__dirname, 'src/assets/images/favicon.ico'),
		 inject: true,
		 hash: true,
		 minify: {
		  removeComments: true,
		  collapseWhitespace: false
		 }
  }),

  new HtmlWebpackPlugin({ // for main page
    chunks: ['main','commons'],
    title: 'main page',
    filename: 'index.html',
    template: path.join(__dirname, 'src/pages/main/index.tpl.html'),
    favicon: path.join(__dirname, 'src/assets/images/favicon.ico'),
    inject: true,
    hash: true,
    minify: {
      removeComments: true,
      collapseWhitespace: false
    }
  }),

]

// loaders
let  loaders = [
  // all files with a special extension will be handled by some special loaders
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [__dirname + '/src']
  },
  {
    test: /\.jsx?$/,
    loaders: ['babel-loader'],
    exclude: /node_modules/
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    include: [__dirname + '/src']
  },
  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader')
  },
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader!sass-loader?sourceMap')
  },
  {
    test: /\.json$/,
    loader: 'json-loader'
  },

  {
    test: /\.(png|jpe?g|gif|svg)$/i,
    loader: 'url-loader?limit=10000'
  },

  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
    loader: "url-loader?limit=10000&minetype=application/font-woff"
  },
  {
    test: /\.(woff|eot|ttf)$/i,
    loader: 'url-loader?limit=10000'
  },
  {
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/i,
    loader: 'url-loader?limit=10000'
  },
  {
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/i,
    loader: 'url-loader?limit=10000'
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/i,
    loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
  },

]

// config
module.exports = {
  debug: true,

  entry: entry,

  output: {
    path: path.resolve(__dirname, './dist'), // The output directory as absolute path (required).
    filename: '[name].bundle.js',
    chunkFilename: "[id].chunk.js?[chunkhash:8]",
    // publicPath: "/",      // webpack-dev-server  访问时使用地址: 0.0.0.0:8080/index.html
    publicPath: "/public/",  // webpack-dev-server  访问时使用地址: 0.0.0.0:8080/public/index.html 0.0.0.0:8080/public/xx.bundle.js
  },

  postcss: function () {
    return [precss, autoprefixer];
  },

  vue: {
    css: ExtractTextPlugin.extract("css-loader?sourceMap"),
    sass: ExtractTextPlugin.extract("css-loader?sourceMap!postcss-loader!sass-loader?sourceMap"),
    js: 'babel-loader'
  },

  babel: {
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
  },

  // 模块resolve配置,require时模块查询各种配置
  resolve : {
    // require()时,如果没有后缀名,自动添加下面配置的后缀名(下面空后缀名不能省略,表示其他的后缀)
    extensions: ['', ".webpack.js", ".web.js", '.js', '.jsx', ".ts", ".tsx", '.scss', '.styl', '.jade', '.vue'],
    //模块别名定义:
    alias: {}
  },

  module: { loaders: loaders },

  plugins: plugins,

  // eval-source-map is faster for development
  // but source-map is more better when using ExtractTextPlugin and sass-loader
  devtool: "source-map",

  devServer: {
    // 保存静态文件 上面的publicPath是对外提供访问路径的,实际上是访问服务器上的地址(目录)为static下的静态文件 (就是express中静态文件服务器)
    // 由于devServer将其映射到了内存里,所以实际上这个目录可以不存在(存在内存中)
    // contentBase 默认是为当前目录,一般可以不指定 http://0.0.0.0:7070/publicPath/index.html --> static/index.html
    contentBase: "static/",
    open: true,
    hot: true,
    port: 7070,
    // 这里的4个0和127.0.0.1的区别：使用4个0可以表示本机的本地的ip地址包括(局域网的IP地址)，这样手机就可以访问了，127.0.0.1只能在本机中访问
    host: '0.0.0.0',
    // enable HTML5 history routing
    historyApiFallback: true,
    // suppress useless text
    noInfo: true,
  },

  // 设置外部变量,挂到全局
  externals: {

  }
}