webpack4一个可用的搭配

已搭配功能详见 package.json
`
// webpack.config.js 文件

const path = require(‘path’);
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
module.exports = (env, argv) => {
const devMode = argv.mode !== ‘production’
return {
mode: ‘none’,
entry: [
“babel-polyfill”,
path.join(__dirname, ‘./src/index.js’)
],

    devServer: {
        contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
        port: 8089 //端口号设为8080, 默认也是8080
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            title: 'hello sass',
            filename: 'index.html'
          })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

}

}
`

"html-webpack-plugin": “^3.2.0” 这个的版本 搭配 webpack4 版本!!!
`
//package.json 文件

{
“name”: “node_hj_codes”,
“version”: “1.0.0”,
“main”: “webpack.config.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“start”: “webpack-dev-server --mode development --module-bind js=babel-loader”,
“dev”: “webpack --mode development --module-bind js=babel-loader”,
“build”: “webpack --mode production --module-bind js=babel-loader”
},
“repository”: {
“type”: “git”,
“url”: “”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“description”: “”,
“devDependencies”: {
“@babel/core”: “^7.14.6”,
“@babel/plugin-transform-runtime”: “^7.14.5”,
“@babel/polyfill”: “^7.12.1”,
“@babel/preset-env”: “^7.14.7”,
“babel-loader”: “^8.2.2”,
“babel-plugin-transform-runtime”: “^6.23.0”,
“babel-polyfill”: “^6.26.0”,
“clean-webpack-plugin”: “^4.0.0-alpha.0”,
“css-loader”: “^5.2.6”,
“html-webpack-plugin”: “^3.2.0”,
“mini-css-extract-plugin”: “^1.6.0”,
“postcss-loader”: “^6.1.0”,
“style-loader”: “^2.0.0”,
“webpack”: “^4.46.0”,
“webpack-cli”: “^3.3.12”,
“webpack-dev-server”: “^3.11.2”
}
}

`
.babelrc 文件

{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "modules": false, "targets": { "browsers": "last 2 versions, not ie <= 9" } } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "helpers": false } ] ] }

项目结构