webpack配置

webpack.config.js 配置

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin'); //清理文件夾

// css autoprefix  自動給 css 添加瀏覽器內核前綴
var precss = require('precss');
var autoprefixer = require('autoprefixer');

  const glob = require('glob');
// 注入全部src下以 -index.jsx結尾的文件
  const files = glob.sync('./src/js/*.js');
  const newEntries = files.reduce(function (memo, file) {
    // const name = path.basename(file, '.jsx');
    const name = file.replace('./src/js/', '').replace('.js', '');
    memo[name] = file;
    return memo;
  }, {});
  const entry = Object.assign({}, {
    index: [
            'webpack-dev-server/client?http://localhost:8000',
            'webpack/hot/only-dev-server',
            './src/js/index.js'
        ],
        lib:[ // 打包合併公共部分（公共資源與單文件分開打包）
          'react', 'react-dom'
        ]
  }, newEntries);

module.exports = {
    //頁面入口文件配置
    entry:entry,
    // entry: {
    //     index: [
    //         'webpack-dev-server/client?http://localhost:8000',
    //         'webpack/hot/only-dev-server',
    //         './src/js/index.js'
    //     ],
    //     lib:[ // 打包合併公共部分（公共資源與單文件分開打包）
    //       'react', 'react-dom'
    //     ],
    //     index:'./src/js/index.js',
    //     compnent:['./src/js/compnent/pageb.js','./src/js/lib/common.js'],
    //     module1:'./src/module1/module1.js',
    //     module2:'./src/module2/module2.js',
    // },
    
    //入口文件輸出配置
    output: {
        path: __dirname + '/dist/',
        filename: 'js/[name].js',
        chunkFilename: "[id].js"
    },
    module: {
         // preLoaders:[{
         //    test: /\.(jsx|js)$/,
         //    loader: 'eslint-loader',
         //    exclude: /node_modules/
         //  }],
        //加載器配置
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({fallback:"style-loader", use:"css-loader"}) // css-loader 用於將 css 當作模塊同樣來 import  style-loader 用於自動將 css 添加到頁面
            },

            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({fallback:"style-loader", use:"css-loader!less-loader"})
            },

            {
                test: /\.js$/,
                loader: 'jsx-loader?harmony'
            },

            //{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            },

            {
                test: /\.js|jsx$/, 
                loaders: ['babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0']
            },

            {
                test: /\.json$/,
                loader: 'json'
            }, 

            {
                test: /\.html$/,
                loader: 'html?interpolate'
            },

            {
                test: /\.js|jsx$/,
                loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0'],
                include: path.join(__dirname, 'js')
            },

            {
                test: /\.(jsx|js)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            },

            {
              test: /\.(?:jpg|gif|png|svg)$/,
              loaders: [
                'url?limit=8000&name=img/[hash].[ext]',
                'image-webpack'
              ]
            }
        ]
    },
    //其它解決方案配置
    resolve: {
        extensions: ['.js', '.jsx','.json', '.scss' , '.css', '.less']
    },
    //插件項
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 熱更新
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({ name: 'lib', filename: 'js/common/lib.js' }), // 打包公共資源
        new ExtractTextPlugin("css/[name].css"), // 打包css文件
        new HtmlWebpackPlugin({ // 生成html，將js及css等靜態資源自動引入html，壓縮html文件
            filename: 'index.html',
            //chunks: ['src', 'moudle1'],
            minify: {
              collapseWhitespace: true,
              collapseInlineTagWhitespace: true,
              removeRedundantAttributes: true,
              removeEmptyAttributes: true,
              removeScriptTypeAttributes: true,
              removeStyleLinkTypeAttributes: true,
              removeComments: true
            }}),
        new webpack.optimize.UglifyJsPlugin({ // 壓縮js，css資源
            compress: {
                // sourceMap: true,
                warnings: false
            }
        }),
        //清空輸出目錄
        new CleanPlugin(['dist'], {
            "root": path.resolve(__dirname, './'),
            verbose: true,
            dry: false
        }),
    ],

    
    //eslint 檢查
     // eslint: {
     //     configFile: './.eslintrc'
     // }
};