module.exports={//入口文件的配置项
    entry:{},//出口文件的配置项
    output:{},//解读CSS,图片如何转换，压缩等配置
    module:{},//项目依赖
    plugins:[],//配置webpack开发服务功能
    devServer:{}
}

entry:{//里面的entery是可以随便写的entry:'./src/entry.js'
},

const path = require('path');output:{//打包的路径path:path.resolve(__dirname,'dist'),//打包的文件名称filename:'bundle.js'}

const path = require('path');
module.exports={entry:{//为了区别不同的入口,需要不同的属性名entry:'./src/entry.js',//这里我们又引入了一个入口文件entry2:'./src/entry2.js'},output:{path:path.resolve(__dirname,'dist'),//输出的文件名称,[name]会自动获取入口文件中的文件名,不同的文件就能拿到不同的文件名
        filename:`[name].js`},module:{},plugins:[],devServer:{}
}

const path = require('path');
module.exports={entry:{
//入口文件并没有css文件?可以在entry.js中引入css文件,方便webpack进行同步压缩entry:'./src/entry.js',entry2:'./src/entry2.js'},output:{path:path.resolve(__dirname,'dist'),filename:`[name].js`},//webpack能识别css文件,但是你必须得告诉它我这里有css文件,所以在这里你要告诉它哪些文件是css文件
    module:{//它表示哪种类型的文件用哪种处理器(处理器?原来有吗?没有!所以需要下载,需要执行下载的语法)
    rules:[//匹配到.css结尾的文件,就先调用对应的处理器{test: /\.css$/, loader: "style!css?sourceMap!postcss"},{test: /\.less$/, loader: "style!css!less|postcss"},{test: /\.scss$/, loader: "style!css!sass|postcss"}]
]
},plugins:[],devServer:{}
}

const path = require('path');
//导入需要的插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports={ entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, output:{ path:path.resolve(__dirname,'dist'), filename:`[name].js` }, module:{ rules:[ {test: /\.css$/, loader: "style!css?sourceMap!postcss"}, {test: /\.less$/, loader: "style!css!less|postcss"}, {test: /\.scss$/, loader: "style!css!sass|postcss"}  ] }, plugins:[
//打包js文件new webpack.optimize.UglifyJsPlugin(),
//entry.html未模板生成一个html5文件new HtmlWebpackPlugin({template:'./src/entry.html'})],devServer:{}
}

const path = require('path');
//导入需要的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports={
entry:{entry:'./src/entry.js',
entry2:'./src/entry2.js'},
output:{
path:path.resolve(__dirname,'dist'), filename:`[name].js`},module:{
rules:[
{test: /\.css$/, loader: "style!css?sourceMap!postcss"},
{test: /\.less$/, loader: "style!css!less|postcss"},
{test: /\.scss$/, loader: "style!css!sass|postcss"} ]
}, plugins:[
//打包js文件new webpack.optimize.UglifyJsPlugin(),
//entry.html未模板生成一个html5文件new HtmlWebpackPlugin({template:'./src/entry.html'})],
//这里只列出部分参数,还有许多参数
    devServer: {//如果为 true ，页面出错不会弹出 404 页面。如果为 {...} , 看看一般里面有什么。historyApiFallback: true,  //热模块更新作用。即修改或模块后，保存会自动更新，页面不用刷新呈现最新的效果(实际功能是自动添加HMR这个插件) hot: true,//如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。  compress: true, //写主机名的。默认 localhosthost: 'localhost',//端口号。默认 8080 port: 8080
}

"scripts": {"dev": "webpack-dev-server" // 运行命令会自动在node_modules文件夹找 webapck-dev-server模块。"dev"就是你命令中run后面的词,你也可以换成"server"等词,不过对应的命令就得换成"npm run server"等}