webpack学习心得

 

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    index:'./src/js/entry/index.js'
  },
  output: {
    //dist/assets/放js和img
    path: path.resolve(__dirname, 'dist/assets/'),
    // publicPath: '/assets/',
    //作用是配合devServer的contentBase写成./src 然后index.html里
    //<script src="./assets/index.js"></script>
    filename: '[name].js'  //[name]就是entry的index
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']  //要写这个才有作用
        }
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      },
      {
        test: /\.html$/,
        loader: 'html-withimg-loader'  //处理img引入的图片
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(  //把src的html搬到dist
      {
        filename: '../index.html',  //会在dist/assets/下 因此要../
        template: './src/index.html'  //模板，会直接照搬过去，src的html只要写结构
      }),
  //   js压缩放在最后，导致热更新慢的罪魁祸首
  //   new webpack.optimize.UglifyJsPlugin({
  //     mangle: {
  //       except: ['$','jQuery']
  //     },
  //     compress: {
  //       warnings: false
  //     }
  //   })
  ],
  devServer: {
    contentBase: "./dist",  //本地服务器所加载的页面所在的目录
    colors: true,  //终端中输出结果为彩色
    historyApiFallback: true,  //不跳转
    inline: true,  //实时刷新
    // hot:true
  }
}