webpack常用配置

webpack常用配置

周末闲来无事 整理一下webpack基本配置，记录一下，也分享一下，如有错误，还请各位大神指正

// 配置webpack得配置文件，需要将配置的对象导出，给webpack使用
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 处理自动生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");  //css 分离
const { CleanWebpackPlugin }= require('clean-webpack-plugin');//每次打包之前清除dist 目录内容
module.exports = {
    // 入口，从哪个文件开始打包
    entry: './src/main.js',  
    // 出口，打包到哪里去
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',  //打包出的文件名称,打包生成文件为 dist目录下 bundle.js
    },
    // 模式  development 未压缩   prodcution 压缩
    mode:'development',
    module: {
        rules: [
            // 从右向左执行
            //css 使wewpack能够识别css 文件
            // style-loader 通过动态创建style 标签的方式，让解析后的css 内容，能够作用到页面中
            // MiniCssExtractPlugin 改变css模式引入方式

            { test: /\.css$/, use: [
              MiniCssExtractPlugin.loader,  //
              'css-loader'
            ] },
            { test: /\.less$/, use: [
              MiniCssExtractPlugin.loader,  //
              'css-loader',
              'less-loader'
            ] },
            {
              test: /\.(png|jpg|gif)$/i,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    limit: 40*1024,
                    name:'[name].[ext]',//输出名
                    publicPath:'../imgs', //配置静态资源引用路径
                    outputPath:'imgs/'// 配置输出的文件目录
 
                  },
                },
              ],
            },
            {  //处理高版本js 写法
              test: /\.m?js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env']
                }
              }
            }
        ],
      },
    plugins: [  // 在dist 目录下自动生成index.html 文件，并且自动引入bundle.js ，
        // new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({ template: './public/index.html' }),
        new MiniCssExtractPlugin({
            filename: "css/index.css",
          }),
        new CleanWebpackPlugin()  //每次打包自动清除上次的dist目录
      
    ],
    devServer :{
      port:3000, //配置端口号
      open: true  // 自动打开浏览器
    }
}