entry
指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的.默认值是 ./src/index.js
output
告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中
loader
webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中
plugin
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
代码解读
var webpack =require('webpack')
var path =require('path')//路径处理
var ExtractTextPlugin =require('extract-text-webpack-plugin')//插件
var autoprefixer =require('autoprefixer')//自动添加浏览器前缀
module.exports = {
entry:path.join(__dirname, "js/app/index.js"),//入口文件
output: {
path:path.join(__dirname, "../public"), //导出的文件位置
filename:"js/index.js"
},
module: {
rules: [{
test:/\.less$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use: ["css-loader", "less-loader", "postcss-loader"]//less格式转换成css
})//把 css 抽离出来生成一个文件
}]
},
resolve: {
alias: {
jquery:path.join(__dirname, "js/lib/jquery-2.0.3.min.js"), //取一个别称，导入的时候就可以简化
mod:path.join(__dirname, "js/mod"),
less:path.join(__dirname, "less")
}
},
plugins: [
new webpack.ProvidePlugin({//全局导入
$:"jquery"
}),
new ExtractTextPlugin("css/index.css"),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer(),
]
}
})
]
};
