Babel is a JavaScript compiler
- babel结合webpack处理JS模块
- babel对于ES6新增的API不会转换,比如 Promise,Array.from, Object.assign
- babel编译ES6代码
3-1. npm init
3-2. npm install --save-dev @bable/core @bable/cli
3-3. script里添加build: babel src -d dist
src dist 分别是原文件编译后文件
3-4. 创建bable配置文件 .babelrc
3-4. npm run build
webpack 是静态模块打包器
- 定义:作用静态模块(资源在本地)打包器,包括模块内的css,图片,字体
打包成一个或多个文件。动态的内容没办法(资源在远程) - webpack 初体验
2-1. 初始化项目 npm init
2-2. 安装webpack:npm install --save-dev webpack-cli webpack
2-3. webpack配置文件://webpack.config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename:'bundle.js', }, plugins: { new HtmlWebpackPlugin({ template: "3.html", filename:"index.html", chunks:['index']}) } }
2-4. webpack 命令行打包 scripts里
"webpack": "webpack --config webpack.config.js",
2-5. webpack 的四个概念: entry,output,loader,plugins
entry:
单入口 , 多入口
output:
path,filename 多入口文件的输出 也需配置对应的输出文件
loader
: 就是让webpack能够去处理那些非JS文件的模块,module.rules
babel-loader
: 连通babel 与 webpack
plugins
: 执行范围更广的任务。打包优化压缩。。。
2-6. webpack 处理css文件 css-loader
javascript module: { rules: [{ test: '/\.css$/', loader: 'css-loader' }] }