webpack

//webpack 是node写出来的node的写法

let path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin'); //抽离html

let MinCssExtractPlugin = require('mini-css-extract-plugin'); //抽离css

let TerserJSPlugin = require('terser-webpack-plugin'); //压缩js插件

let OptimizeCss = require('optimize-css-assets-webpack-plugin'); //压缩css插件

let {CleanWebpackPlugin} = require('clean-webpack-plugin');// 清空 dist插件

let webpack = require('webpack');

module.exports = {

   devServer: { //开发服务器的配置

       hot: true,//热更新

       port: 3000,

       progress: true,

       contentBase: './dist',

       // open: true,//自动打开浏览器

   },

   optimization: { //优化项

       minimizer: [

           new TerserJSPlugin({}),

           new OptimizeCss({}) //压缩css

       ]

   },

   mode: 'development', //模式 默认两张 production development

   entry: './webpackSrc/src/index.js', //入口

   //source-map 传说map文件 eval-source-map 不产生文件 cheap-module-source-map  不会产生列但是会有单独文件  cheap-module-eval-source-map

   devtool: 'source-map',//源码映射 出错会标注位置

   // watch: true,//实时监控打包

   // watchOptions:{

   //     poll: 1000, //每秒问个

   //     aggregateTimeout: 500,//防抖

   //     ignored: /node_modules/

   // },

   output: {

       filename: 'bundle.[hash:8].js', // 打包后的文件名

       path: path.resolve(__dirname, "dist"), //路径必须是个绝对路径

       // publicPath: 'https://baidu.com/',//统一给输出加路径

   },

   plugins: [ // 数组 放着所有的webpack插件

       new webpack.DefinePlugin({

           DEV: JSON.stringify('development'),//存全局变量  编译时区分开发模式

       }),

       new HtmlWebpackPlugin({

           template: './webpackSrc/src/index.html',

           filename: 'index.html',

           minify: { //配置 压缩html                

           },

           hash: true,

       }),

       new MinCssExtractPlugin({

           filename: 'css/main.css'

       }),

       new webpack.ProvidePlugin({ //给每个模块默认注入一股￥

           $: 'jquery'

       }),

       new webpack.NamedModulesPlugin(),//打印更新模块路径

       new webpack.HotModuleReplacementPlugin(),//热更新插件

       new CleanWebpackPlugin()

   ],

   externals: { //排查打包第三方模块  index.html已引用的

       jquery: '$'

   },

   module: { //模块

       noParse: /jquery/,//不去解析jquery中的依赖库  优化webpack

       //loader

       rules: [

           // {

           //     test: /\.js/,

           //     use:{

           //         loader: 'eslint-loader',//npm add eslint eslint-loader -D

           //         options: {

           //             enforce: 'pre' //强制优先执行

           //         }

           //     }

           // },

           {

               test: /\.(png|jpe?g|gif)$/i,

               //做一个限制 图片小于多少k 用base64转 否则就用file-loader

               use: [{

                   loader: 'url-loader',

                   options: {

                       limit: 1,

                       outputPath: '/img/',//打包分类

                       // publicPath: 'https://baidu.com/',//统一给输出加路径

                   }

               }, ],

           },

           {

               test: /\.js$/,

               use: {

                   loader: 'babel-loader',

                   options: { //用babel-loader 需要把es6>es5

                       presets: [

                           '@babel/preset-env'

                       ],

                       plugins: [ //高等级js子插件

                           '@babel/plugin-proposal-class-properties'

                       ]

                   }

               },

               include: [path.resolve(__dirname, 'src'),path.resolve(__dirname, 'webpackSrc')], //包括

               exclude: /node_modules/, //剔除

           },

           //规则 css-loader 解析 @import这种语法

           // style-loader 他是把css插入到headd 标签中

           // loader的特点 希望单一

           // loader的用法 字符串只用一个loader

           //多个loader 需要[]

           // loader的用法 的顺序 默认是从右向左执行 从下倒上

           //  loader还可以写成对象方式

           {

               test: /\.css$/,

               use: [

                   MinCssExtractPlugin.loader,

                   'css-loader', // @import 解析路径

                   'postcss-loader', //增加浏览器前缀

               ]

           },

           {

               test: /\.less$/,

               use: [

                   MinCssExtractPlugin.loader, //抽离css

                   'css-loader',

                   'postcss-loader', //增加浏览器前缀

                   'less-loader' // 把less -> css

               ]

           }

       ]

   },

   resolve: {//解析 第三方包 common

       modules: [path.resolve('node_modules')],//指定第三方包路径

       extensions:['.js','.css','.json'],//import 不写文件后缀事查找文件顺序

       mainFields: ['style','main'],//主入口顺序

       alias:{ //第三方别名

           bootstapCss: 'bootstap/dist/css/bootstap.css',//import 'bootstapCss'

       }

   }

}