利用一些简单的webpack的插件

利用一些简单的webpack的插件

• 使用devtool

• 如何使用webpack 中的 watch

const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

// 拷贝插件 CopyWebpackPlugin 
// 版权申明插件 内置

module.exports = {
    mode: 'development',
    // 多入口
    entry: {
        home: __dirname + '/src/index.js'
    },
    // 两个入口打包, 需要对应的多个出口， 产生多个html
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[hash:4].js'
    },
    devtool: 'source-map', 
    // 增加的映射文件  eval-source-map 产生单独的文件  ）
    // 3 不会产生列， 但是是一个单独的映射文件.
    // 'cheap-module-source-map' 不会和代码关联起来 
    // 4）不会产生文件, 集成在打包文件中，不会产生列 'cheap-noudle-eval-source-map'
    devServer: {
        contentBase: '/public',
        hot: true,
        port: 8000
    },
    watch: true,  // 监控实时打包
    watchOptions: {  // 监控的选项
        poll: 1000,  // 每秒1000次
        ignored: /node_modules/, // 不需要监控的文件
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/i,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    // new 两次拆建
    plugins: [
        new HtmlWebpackPlugin({
            title: '龙风的测试店铺',
            template: __dirname + '/public/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.BannerPlugin('make 2020 by yaogengzhu'),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'doc', to: 'dist' },
            ],
        })
    ]
}