接上篇。。。
每天记录下自己的学习经过。
demo地址 github.com/levai/webpa…
14.babel:编译JS,使用ES6 7
14.1 使用babel-loader、babel-core、babei-preset-env 转化
npm i babel-loader babel-core babel-preset-env -D
14.2 在webpack.config.js 文件中定义一个处理规则
// 使用babel-loader 转化新语法
{
test:/\.(js|jsx)$/,
use:['babel-loader'],
exclude:'/node_modules' // 排除依赖模块文件目录
}
14.3 在webpack.config.js同级目录配置.bablelrc文件：配置内容如下：
{
"presets":[
"env","react"
]
}
15.静态资源输出，把这些文件原封不动的复制粘贴出去
15.1 使用copy-webpack-plugin 插件处理 15.2 安装插件与引入
npm i copy-webpack-plugin -D
// 在webpack.config.js 中require copy-webpack-plugin插件进来
const CopyWebpackPlugin = require('copy-webpack-plugin');
15.3 在plugins中配置使用
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 在plugins 中配置
new CopyWebpackPlugin([ //支持输入一个数组
{
from: path.resolve(__dirname, 'src/assets'), //将src/assets下的文件
to: './assets' // 复制到dist目录下的assets文件夹中
}
])
16.配置第三方库，如jquery，推荐使用插件方式配置
16.1 使用webpack自带的ProvidePlugin 下载jq
// 引入模块
npm i jquery -S
const webpack = require('webpack');
// 在插件中配置
new Webpack.ProvidePlugin({ //下载Jquery库
$:'jquery'
})
