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'        })    ]}