自制脚手架(webpack4.x的基本配置)

const path = require('path')
// 将css或者scss文件打包到一个css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 打包后创建一个html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 
const webpack = require('webpack')
module.exports = {
    mode:"development",
    // dev监听运行
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080,
//允许设计组件的热替换处理
        host:true
    },
    entry:{
        njl:"./src/index.js",
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    plugins: [
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: '[name].css',
          chunkFilename: '[id].css',
        }),
        // 需要上面引入webpack
        // 作用就是可以设置全局的常量
        // 可以在任何位置使用
        new webpack.DefinePlugin({
            'SERVICE_URL': JSON.stringify('https://www.njl.com')
        }),
        new HtmlWebpackPlugin({
            title:"njl_APP",
            filname:"index.html",
            template:"./public/index.html"
        }),
    ],
    module:{
        rules:[
            // 解析图片
            {
                test:/\.(png|jpg|gif|svg)(\?.*)?$/,
                use: [
                    {
                      loader: 'url-loader',
                      options: {
                        //   控制图片如果大于8K就不会转换成base64位进入js文件而是变成图片格式
                        limit: 30000,
                      },
                    },
                ],
            },
            // 解析es7，es6变成es5兼容语法
            {
                test: /\.(m?js|jsx)$/,
                // 排除一下包中的js
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                    plugins:['@babel/plugin-transform-react-jsx']
                  }
                }
            },
            // 编译打包scss的文件处理
            //  style-loader  css-loader  sass-loader
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
        ]
    }
}