webpack简单使用

var webpack = require('webpack');
var path = require('path');
// 生成模板文件
var HtmlWebpackPlugin = require('html-webpack-plugin');// 独立样式文件
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  //插件项
  //plugins: [commonsPlugin],
  //页面入口文件配置
  entry: {
    index: [
      'webpack-dev-server/client?http://host.com:3001',//入口路径
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]},
  //文件输出配置
  output: {
    path: path.join(__dirname,'./dist/'),//必须写绝对路径
    publicPath: 'http://host.com:3001/dist/',//热加载地址
    filename: '[name].js'//entry的名字
  },
  resolve: {
    extensions: ['', '.js', '.jsx']//后缀自动补全
  },
  module: {
    //加载器配置
    loaders: [
      { test: /\.jsx?$/,
        loaders: ['react-hot','babel?presets[]=es2015,presets[]=react,presets[]=stage-0'],//react热加载，babel最后的stage-0解决扩展符...的编译问题
        include: path.join(__dirname, 'src')//加载位置
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {presets: ['es2015','react']}
      },
      {
        test: /\.less$/,
        loader: 'style!css!less'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css?modules&localIdentName=[name]__[local]-[hash:base64:5]!autoprefixer')
　　　　　　　　//css-modules模块加载，使用《文件名__class名__base64码5位》，最后是添加浏览器前缀
      }
    ]
  },
  //插件配置
  plugins:[
    //热加载
    new webpack.HotModuleReplacementPlugin(),
    // 独立css文件
    new ExtractTextPlugin('style.css', { allChunks: true }),
    //dev的这个是有必要的，不然要在页面写加载host.com:3001
    new HtmlWebpackPlugin({
      title: '测试',
      template: './assets/index.html',
      inject: true,
      filename: './index.html'
    })
  ]
};

使用hot-loader实现热加载，将代码改动直接显示在页面。

首先需要下载webpack、html-webpack-plugin（生成html还可以将打完包的js直接引进去）、extract-text-webpack-plugin（将样式文件打包到一个文件中）、webpack-dev-server等