webpack入门

webpack的主要配置项

var config = {
    entry: [  //入口，定义要打包的文件
    ],
    //出口，定义打包输出的文件；包括路径，文件名，还可能有运行时的访问路径（publicPath）参数
    output: {  
    },
    //定义能够被打包的文件，文件后缀名, 取别名
    resolve: {
    //webpack将所有资源都看做是模块,而模块就需要加载器；
    module: {
    },
    //定义以下额外的插件
    plugins: [
    ]
}

入口文件和出口文件

let path = require('path');
let htmlPlugin = require('html-webpack-plugin');


module.exports = {
    entry:{
        main:path.join(__dirname,'./src/main.js'), //入口文件
    },
    output:{
        path:path.join(__dirname,'dist'),  //输出目录为dist
        filename:'build.js',  //出口文件
    },
    module:{
        rules:[
            {
                test:/\.js$/,  //正则，表示匹配到.js后缀的文件
                use:[
                    {
                        loader:'babel-loader'  //使用babel编译js文件
                    }
                ],
                exclude:path.join(__dirname,'node_modules') //node_modules不编译

            },{
                test:/\.css$/,
                use:['style-loader','css-loader'],  //先用css-loader再用style-loader

            }
        ]
    },
    plugins:[
        new htmlPlugin({
            //将外面的index.html加上编译好的build.js然后放到dist文件夹里
            template:path.join(__dirname,'index.html'),
            filename:'index.html'
        })
    ]
}