webpack其实就是个打包工具，核心就是webpack配置文件，只要学好来配置文件就可以掌握绝大多数的内容。这是原文的入门地址 http://www.jianshu.com/p/42e11515c10f ,下面是我学完之后的笔记
WebPack的核心概念
webpack 的核心概念有
entry 文件入口
output 用于定义存放打包文件的地方和打包文件名
loader ： 为不同的格式的源文件配置不同的加载器，进行打包处理
plugins： 配置插件，一般需要先在电脑安装该插件，再通过引用模块进一步配置插件
WebPack准备工作
1 新建一个空的文件夹，终端转到空的文件夹使用以下命令
npm -install webpack -g //全局安装
npm -install --save-dev webpack
2 在该文件夹根目录下创建一个package.json文件，它是一个标准的npm说明文件，里面的script属性可以用来配置命令，使用以下命令用来配置package.json文件
npm init
命令执行后会有一系列关于项目信息的询问，可以根据自己实际情况填写，也可以不填写按回车默认跳过
3 在文件夹的根目录下创建两个文件夹比如（app，public）一个用来存放我们想要打包的文件，一个用来存放打包后的文件夹，按照以下目录创建对应文件，用于以后了解整个webpack的打包配置过程。
使用webpack构建本地服务器
webpack提供一个可选的本地开发服务器，用于浏览器监听代码的修改结果，并及时显示，不过使用它之前也需要先在本地安装它，用以下命令
npm install --save-dev webpack-dev-server
之后就可以在配置文件中devServer属性中配置它
WebPack打包的过程
在webpack中，所有文件都是模块，在这个项目中是定义一个单入口文件，所以最后只需要将main.js文件进行打包，使用以下命令
webpack app/main.js public/bundle.js // webpack [被打包的文件路径] [ 打包后的文件路径]
打开public 下我们创建的的index.html ,在<script>标签中引入打包后的文件，以后bundle文件更新，页面也会跟着更新，在index.html中将bundle.js引入
<script type="text/javascript" src="bundle.js"></script>
上面命令使用在全局安装webpack情况下
Webpack loaders 和 webpack plugins
webpack loader 用来处理不同格式类型的源文件如（css，js等），而webpack plugins是用扩展webpack的功能，不操作单独的文件。他们的共同点就是需要事先进行安装，通过以下命令
npm install --save-dev loader名/插件名
之后要在webpck配置文件中配置它,作为对象配置在不同的数组中。loader 配置在moduel 的rules数组中，而plugins 则需要先引入安装后的模块，创建一个对应的实例，配置在plugins数组中
CSS 预处理器
css有以下loader用于打包
less loader
sass loader
stylus loader
还有一个css平台用于处理 -postCss，需要事先安装好插件 和 loader
npm install --save-dev postcss-loader autoprefixer
随后在moduels属性中配置
WebPack配置文件结构(webpack.config.js)
const HtmlWebpackPlugin = require('Html-Webpack-Plugin'); //引入插件模块
const autoprefixer = require('autoprefixer');
module.exports{
entry: __dirname+" app/main.js"//定义唯一入口文件
output： {
path: __dirname+" /public", //定义存放打包文件的地方
filename: "bundle-[hash].js" //打包后输出的文件名 哈希值作为 缓存名称
}
devServer: {
contentBase: "./public", //本地服务器加载页面所在目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
hot: true
},
module：{ //定义不同模块的规则
rules [ //规则是个对象数组
{ test: /(.jsx|.js)$/, //定义文件格式类型
use: {
loader: "babel-loader", //配置使用不同的加载器
options: {
presets: ["es2015", "react]
}
},
exclude: /node_modules/ //表示该文件夹不被打包
},, {
test: /.css$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: 'postcss-loader',
options: {
plugins: function() {
return [autoprefixer]
}
}
}
]
}
plugins : [
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html" //new 一个关键实例并传入相关的参数
}),
]
}
HtmlWebpackagePlugin 插件用于自动生成 html文件，但是需要先创建一个模板的html文件，比如创建一个空的html文件，并把它命名为index.tmpl.htmll