webpack.config.js文件中
module.exports = {
// _dirname 是node.js里面的全局变量，它指向我们项目里面的根目录
// 入口文件的位置
entry:_dirname + ‘/app/main.js‘,
output:{
// 打包后文件的放置位置
path:‘./public‘,
// 打包后文件的名字
filename:‘webpack.js‘
},
module:{
loaders:[
{
test:/\.css$/,
loader:‘style!css!postcss‘
// ！号的作用在于同一文件能够使用不同的loader
// style!css 顺序不能反，原因解析是从右向左的
},{
test:/\.json$/,
loader:‘json‘
},{
test:/\.js$/,
exclude:/node_modules$/,
loader:‘babel‘,
query:{presets:[‘es2015‘,‘react‘]}
}
]
},
postcss:[require(‘autoprefixer‘)], // 使用autoprefixer插件
plugins:[],
devServer:{
contentBase:‘./plubic‘, //本地服务器所加载的页面所在的目录
colors:true, //终端中输出的结果为彩色
historyApiFallback:true, //不跳转
inline:true //实时刷新
}
}
// loader
// Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，loaders的配置项包含以下方面：
// test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
// loader：loader的名称（必须）
// include/exclude:手动添加必须处理的文件（文件夹）或者屏蔽不需要处理的文件（文件夹）（可选）
// query:为loaders提供额外的设置选项（可选）
// webpack提供两个工具处理样式表：css-loader,style-loader
// css-loader使你能够使用类似@import和url(...)的方法实现require()的功能。
// style-loader将所有的计算后的样式加入到页面中，二者组合在一起能后能够使你能把样式表嵌入webpack打包后的js文件中。
// 安装命令： npm install --save-dev style-laoder css-loader
// 配置项的写法：
// test:/\css$/,
// loader:‘style!css‘
// test:/\json$/,
// loader:‘json‘
// 添加样式前缀做浏览器的兼容：
// npm install --save-dev postcss-loader autoprefixer
// postcss:[require(‘autoprefixer‘)]
// 使用autoprefixer插件
//babel
// babel将es6转换成es5
// 安装：npm install --save-dev babel-core babel-loader babel-preset-se2015 babel-preset-react
// 配置项写法：
// {test:/\.js$/,
// exclude:/node_modules$/,
// loader:‘babel‘,
// query:{presets:[‘es2015‘,‘react‘]}}
// React安装：npm install --save-dev react react-dom
//plugins
// 插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关任务。
// loaders和plugin经常混淆：但是他们其实是不同的东西，可以这么来说，loaders是在打包构建过程中用来处理原文件的（jsx,scss,less），一次处理一个，插件并不直接操作单个文件，他直接对整个构建过程起作用。
//自动刷新浏览器
// 一旦修改保存，就会自动执行打包命令，将代码重新打包，并且需要的话还可以刷新浏览器。
// 安装命令：npm install --save-dev webpack-dev-server
// webpack-dev-server的参数
// contentBase 默认webpack-dev-server 会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录
// port 设置默认监听端口号，如果省略默认8080，
// inline 设置为true，当源文件改变时会自动刷新页面
// colors设置为true，使终端输出的文件为彩色的
// historyApiFallback 在开发单页面时非常有用，它依赖于html5 history API ,如果设置为true，所以的跳转将指向index.html
//hot:true热加载
// webpack-dev-server 有两种启动模式
// 1.inline该模式下修改代码会自动打包，并且会刷新浏览器
// 2.iFrame该模式下修改代码会自动打包，不会刷新浏览器
// 运行方式：
// 在命令行内输入：webpack-dev-server --inline
//hot:true热加载 在命令行内输入：webpack-dev-server --inline --hot