1. babel
①在命令行安装babel，命令行：npm install --save-dev babel-core babel-loader babel-preset-es2015
②在webpack.config.js中的module项配置：
module:{
rules: [ //匹配规则
test: /\.js$/, //一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
use: {
loader: 'babel-loader' //loader的名称（必须）
},
exclude: /node_modules/ //屏蔽不需要处理的文件（文件夹）（可选）；
]
}③再创建.babelrc文件并配置
{"preset":["es2015"]}这样你就可以愉快的使用es6来编码了
2. CSS
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中
①在命令行安装css-loader和style-loader，命令行：
npm install --save-dev css-loader style-loader
②在webpack.config.js中的module项配置：
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
}
]
}③再自行创建一个css文件
④在main.js中引入 import './css/main.css';
通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。
CSS Module
CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递到所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中使用相同的类名造成冲突。
①在webpack.config.js的css-loader规则里加option属性，
{
loader: 'css-loader',
options: {
modules: true
}
}②创建一个css文件
③导入到你想放的模块中，如：我导入到hello.js中
import config from './data/hello.json';
import styles from './css/hello.css';//导入
module.exports = function() {
var hello = document.createElement('div');
hello.textContent = config.helloText;
hello.className = styles.root;//增加类名
return hello;
};这样就可以了
3. 插件（Plugins）
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）
HtmlWebpackPlugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
①安装html-webpack-plugin，npm install --save-dev html-webpack-plugin
②把原来的index.html改名为index.tmpl.html，并放到app文件夹目录下
③在webpack.config.js中引入html-webpack-plugin插件，并在module中配置plugins
const path = require('path');
// const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// __dirname变量获取当前模块文件所在目录的完整绝对路径
module.exports = {
// devtool: 'eval-source-map',
entry: __dirname + '/app/main.js',//入口
output: {
path: path.resolve(__dirname, 'dist'),//出口
filename: 'bundle.js' //输出的文件名
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: "postcss-loader"
}
]
}
]
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
// port:设置默认监听端口，如果省略，默认为”8080“
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html'
})
]
};④在命令行重新编译和重启
npm run startnpm run server