webpack 编译Es6 es7
1.安装插件
yarn add @babel/core babel-loader @babel/preset-env -D
@babel/core 是的核心模块
babel-loader 来编译js代码
@babel/preset-env 用来转化es
2.webpack.config.js 添加配置
const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const webpack = require('webpack'); //访问内置的插件 const path = require('path'); let htmlPlugin = ['index', 'other'].map(chunkName => { return new HtmlWebpackPlugin({ template: `./src/${chunkName}.html`, hash: true, filename: `${chunkName}.html`, chunks: [chunkName] }) }) console.log(htmlPlugin) const config = { // 多入口文件 entry: { index: './src/index.js', sum: './src/sum.js', }, // output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, devServer: { contentBase: "static", // 启动一个访问的静态资源文件 compress: true, open: true, port: 9000, hot: true }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', { loader: 'css-loader', options: { importLoader: 1 } }, 'less-loader' ], }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }, { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除的文件目录 include: path.resolve(__dirname, 'src'), //需要编译的文件目录 }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', hash: true, filename: 'home.html' }), new CleanWebpackPlugin(), ...htmlPlugin ] }; module.exports = config;
这里执行还是编译不了 我们要添加配置文件
3.在跟目录下添加 .babelrc 、
{ "presets": [ "@babel/preset-env" ], "plugins": [] // 上倒下 }
就可以编译成功了 但是这里有一个问题 这里只能编译基础语法 不能编译高级语法
4。添加插件和配置编译高级语法
npm install --save core-js@3
.babelrc
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", // 只转化使用的api "corejs": 3 // 转化高版本api } ] ], "plugins": [] // 上倒下 }
越努力越幸运