babel

package

{
“devDependencies”: {
“@babel/core”: “^7.7.7”,
“@babel/plugin-transform-runtime”: “^7.7.6”,
“@babel/preset-env”: “^7.7.7”,
“babel-loader”: “^8.0.6”,
“clean-webpack-plugin”: “^3.0.0”,
“css-loader”: “^3.4.1”,
“express”: “^4.17.1”,
“file-loader”: “^5.0.2”,
“html-webpack-plugin”: “^3.2.0”,
“node-sass”: “^4.13.0”,
“sass-loader”: “^8.0.0”,
“style-loader”: “^1.1.2”,
“url-loader”: “^3.0.0”,
“webpack”: “^4.41.4”,
“webpack-cli”: “^3.3.10”,
“webpack-dev-middleware”: “^3.7.2”,
“webpack-dev-server”: “^3.10.1”
},
“name”: “helu”,
“version”: “1.0.0”,
“description”: “test”,
“main”: “index.js”,
“dependencies”: {
“@babel/polyfill”: “^7.7.0”,
“@babel/runtime”: “^7.7.7”,
“@babel/runtime-corejs2”: “^7.7.7”
},
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“watch”: “webpack —watch”,
“start”: “webpack-dev-server”,
“server”: “node server.js”
},
“keywords”: [
“test”
],
“author”: “helu”,
“license”: “ISC”
}

webpack

const path = require(‘path’);
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const webpack = require(‘webpack’);

module.exports = {
entry: ‘./src/index.js’,
output: {
publicPath: “/“,
filename: ‘bundle.js’,
path: path.resolve(dirname, ‘dist’)
},
devServer: {
contentBase: “./dist”,//path.join(dirname, ‘dist’),
open: true, //自动打开
hot: true,
inline: true
// port: 8000, //默认8080
// proxy: { //接口请求反向代理配置
// “/api”: “http://localhost:3000“
// }
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/, //排除node_modules文件
loader: “babel-loader”,
// options: {
//第一种方式需要在index.js中import “@babel/polyfill”
// “presets”: [[“@babel/preset-env”, {
// // targets: {
// // chrome: “67” //如果浏览器支持不用转换
// // },
// useBuiltIns: “usage” //没用到的语法不用打包到bundle.js中减小体积
// }]], //语法转换
// //解决polyfill全局变量污染
// // “plugins”: [
// // [
// // “@babel/plugin-transform-runtime”,
// // {
// // “corejs”: 2,
// // “helpers”: true,
// // “regenerator”: true,
// // “useESModules”: false,
// // }
// // ]
// // ]
// }
},
{
test: /.(jpg|png|gif)$/,
use: {
loader: ‘url-loader’,
options: {
name: ‘[name].[ext]’, //官网解释[ext]这种是占位符
outputPath: ‘images/‘,
limit: 10240 //限制大小30kb因为这个图片26kb
}
}
},
{
test: /.scss$/,
use: [
‘style-loader’,
‘css-loader’,
‘sass-loader’
]
},
{
test: /.css$/,
use: [
‘style-loader’,
‘css-loader’
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: ‘./src/index.html’,
filename: ‘index.html’, //可不设置 默认index.html
// minify:{
// removeAttributeQuotes:true,//去除引号
// removeComments:true,//去除注释
// removeEmptyAttributes:true,//去除空属性
// collapseWhitespace:true//去除空格
// }
}),
new webpack.HotModuleReplacementPlugin()
],
devtool: ‘cheap-module-eval-source-map’
}

.babelrc

{
“plugins”: [
[
“@babel/plugin-transform-runtime”,
{
“corejs”: 2,
“helpers”: true,
“regenerator”: true,
“useESModules”: false,
}
]
]
}

index.js

//import “@babel/polyfill”; //解决低版本浏览器支持
import ‘./index.scss’;
import ‘./index.css’;
import count from ‘./count.js’;
import print from ‘./print.js’;

// const btn = document.createElement(‘button’);
// btn.innerHTML = ‘添加’;
// document.body.appendChild(btn);

// btn.onclick = function() {
// const div = document.createElement(‘div’);
// div.innerHTML = ‘div’;
// document.body.appendChild(div);
// };
const arr = [
new Promise(() => {}),
]
const fntest = () => {
console.log(11)
}
console.log(arr);
console.log(fntest);
count()
print()

if (module.hot) {
module.hot.accept(‘./count.js’, function() {
document.body.removeChild(document.getElementById(‘count’))
count();
})
}