webpack 入门三 打包css、图片、静态资源

//搭建环境------------------------------------------------------------
//package.json文件
npm init

//安装webpack
npm install webpack -g
npm install webpack-cli -g

//插件
npm install html-webpack-plugin --save-dev
npm install css-loader style-loader --save-dev
npm install file-loader --save-dev
npm install url-loader --save-dev
npm install copy-webpack-plugin --save-dev

npm install clean-webpack-plugin --save-dev

//简单打包 webpack ./a.js ./bundle.js //配置打包 webpack --config webpack.config.js

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CopyPlugin = require("copy-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

var path = require('path');


module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [

        new CleanWebpackPlugin(),

        new HtmlWebpackPlugin({
            title: 'Custom template',
            // Load a custom template (lodash by default)
            template: 'index.html'
        })
    ]
};