webpack 第二篇（搭建一个webpack）

let webpack = require('webpack');
let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: {
        index: './public/javascript/entry.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].bundle.js',
        publicPath: './build/'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
            { test: /\.(png|jpg|gif)$/, loader: 'file-loader?limit=8192&name=../[path][name].[ext]' },
            { test: /\.js[x]?$/, loader: 'babel' }
        ]
    },
    plugins: [
        //查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
        // new webpack.optimize.CommonsChunkPlugin('common.js'),
        // new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('[name].css', { allChunks: true })
    ]
}

// 引入css文件 该文件会通过css-loader等Loader转换成js文件类型以通过webpack的识别
require('../stylesheet/style.css');
// 引入module.js 即 text 等于 module.js文件中的module.exports
// 即 test = 'It works from module.js.'
let text= require('./module.js');
// 下面的是正常的js代码
let array = [1, 2, 3, 4];

class Person{
    constructor(name){
        this.name = name;
    }
    sayHello(){
        console.log(`hi I am ${this.name} `);
    }
}
let person=new Person('xyf')
person.sayHello();

document.write('It works.' + array[0]);
document.write(text);