webpack打包工具配置教程

|webpack.config.js(文件)
|.babelrc(文件)
|dist(目录)
|src(目录)
    |index.html（文件）
    |main.js（文件）
    |css(目录)
        |index.css（文件）

npm i webpack webpack-cli webpack-dev-server -D
npm i html-webpack-plugin -D

npm i style-loader css-loader -D

　　　　　const path = require('path')
        const htmlWebpackPlugin = require('html-webpack-plugin')

        module.exports = {
            entry:{path:path.join(__dirname,'./src/main.js')},
            output:{
                path:path.join(__dirname,'./dist'),
                filename:'bundle.js'
            },
            module:{
                rules:[
                    {test:/.css$/,use:['style-loader','css-loader']}
                ]
            },
            plugins:[
                new htmlWebpackPlugin({
                    template:path.join(__dirname,'./src/index.html'),
                    filename:'index.html'
                })
            ]
        }

npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

"dev": "webpack-dev-server --open --port 3000 --content  src --mode=development --hot"