1.2、配置

安装webpack

npm i webpack webpack-cli -S

1.2.1、项目目录

1.2.2、 index.js处理css

npm i style-loader css-loader

index.js

//index.js
import './assets/styles/base.css'

1.2.3、 webpack.config.js

const webpack = require('webpack');
const path = require('path')
const config = {
    target:"web",
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    mode:"development"
}
module.exports = config

1.2.4、 配置html-webpack-plugin

给打包文件一个html文件

npm i html-webpack-plugin -S

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

npm run build打包 
dist文件夹下生产index.html的文件

1.2.5、 清除dist文件夹

在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。让我们实现这个需求。 clean-webpack-plugin 是一个流行的清理插件，安装和配置它。

npm i clean-webpack-plugin -S

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
        new CleanWebpackPlugin()
]