webpack知识点

最近重新看一遍webpack,随手记录一些知识点，任重而道远

var htmlWebpackPlugin = require("html-webpack-plugin"); //自动引入HTML文件
var path = require("path");
module.export = {
  entry: "./src/script/main.js", //入口文件
  /**
   * entry的三种表现形式：一：entry:'./src/script/main.js',
   *                    二：entry:['./src/script/main.js','./src/script/a.js']
   *                    三：entry:{
                                 app:'./src/script/main.js'
                                  }
   */
  output: {
    path: "./dist", //打包后的路径
    filename: "js/[name].bundle.js", //打包后的文件名
    publicPath: "http://cdn.com/" //占位符，上线时候路径
  },
  module: { 
    loaders: [
      {
        test: /.js$/,
        loader: "babel-loader",
        query: {
          presets: ["latest"] //也可以在项目的根路径下新建一个.babelrc.js的文件,或者在package.json里面
        },
        include: [path.resolve(__dirname, "src")]
      },
      {
        test:/.css$/,
        loader:'style-loader!css-loader!postcss-loader' //loader是从右往左，所以先加载的是css-loader
        // loaders:['style-loader','css-loader','postcss-loader']
      },
      {
        test:/.scss$/,
        loader:'style!css!postcss!sass'
      },
      {
        test:/.(png|jpg|gif|svg)$/i,
        loader:'url-loader',
        options:{
          limit: 10000,//限制大小
          name:'img' //给生成图片的名字
        }
      }
    ]
  },
  postcss:[
    require('autoprefixer')({
      browsers:['last 5 versions'] //给最近的5个浏览器加前缀
    })
  ],
  plugins: [
    new htmlWebpackPlugin({
      template: "index.html",
      filename: "index.html",
      inject: "head", // 把脚本放在的位置,设为false就不会inject
      minify: {
        //压缩
        removeComments: true, //删除注释
        collapseWhitespace: true //删除空格
      },
      excludeChunks: [] //除了这里面的模块，其他的会被加载进来
    })
  ]
};
/**
 * output.filename支持三个占位符 [name] [hash] [chunkhash]
   [name]：entry作为一个对象使用时，前面的key,就是上面的app
   [hash]:是这次打包的一个hash
   [chunkhash]:每一个chunk自己的hash 
 */