webpack基本配置,asset资源

webpack.config.js module.exports:

• entry 是指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。
• output是指输出文件的配置项
  path － 表示输出文件的路径
  filename - 表示输出文件的文件名

output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }

• plugin插件:为一个数组，先通过npm安装，然后在webpack.config.js的module中的plugin关键字中安装插件（直接在plugin中new一个插件)
  webpack外置插件

//导入webpack
var webpack = require("webpack");
//npm install component-webpack-plugin 先要在安装该模版
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
        new ComponentPlugin()
    ]
}

• module 配置处理文件的选项
  loaders（数组）:test正则表达式，匹配文件
• resolve：其它解决方案配置

loader:文件加载器，能够加载资源文件，并对文件进行处理，如压缩,编译，最终打包到指定文件中
一个数组，里面的每一个对象都用正则表达式，对应着一种配对方案

module: {
        loaders: [
            {test: /\.js$/, loader: "babel"},//test 用来匹配相对应文件的正则表达式
            {test: /\.css$/, loader: "style!css"},
        ]
    }

• 需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置
• 使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行
• 第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码

css-loader：

//添加css样式 css-loader style-loader
//终端npm install --save-dev style-loader css-loader
//需要在webpack.config.js中的module中的rules中用数组形式添加
//style-loader  css-loader  顺序不可变
//使用 import引入文件
module: {
    rules:{
        ----
        loader[{
            text:/.\css$/,
            use: ['style-loader' ,'css-loader']
        }
    }]
}

less-loader:

//使用less  终端 npm install less-loader
//在目录中创建less
//其中less-loader要写在最后面
//引入less文件  如：import './style.less'
module: {
    rules:{
        ----
        {
            text:/\.(css|less)$/,
            use: ['style-loader ','css-loader','less-loader']
        }
    }
}

babel-loader:将es6转变为es5

//npm install babel-loader @babel/core @babel/preset-env
//终端 npm install @babel/runtime 
//终端 npm install @babel/plugin-transform-runtime
----
{
    test: /\.js$/,
    exclude: /node_nodules/,//不需要改变node_modules所以要将其删除
    use: {
        loader: 'babel-loader'
    },
    options: {
        presets: {@babel/preset-env}
        //其中有两个参数，但是这里只写一个插件
        plugins: {
            {
                @babel/plugin-transform-runtime//配置插件 npm install @babel/plugin-transform-runtime -D
            }
        }
    }
}

asset-resource资源：asset-resource资源（生成单独文件，并导出url），可以载入任何类型资源

//如添加图片，添加图片设置路径并自动生成文件名：
1.	output: {
	  assetModuleFilename: 'images/[contenthash][ext]'
}
(第一个值是根据图片自动生成的哈希，第二个值是扩展名，images为文件名)
2.	module: {
	 rules: {
		----
		generator: {
			filename:'images/[contentfash][ext]'
		}
	}
}
//若以上两种均存在时，以generator为优先级

asset-inline:写入内容是时只在浏览器中显示，不在文件中显示
asset:通用数据类型

module: {
    rules: {
        ----
        {
            test: /\.jpg/,
            type: 'asset',
            //在asset-inline和asset-source之间会进行选择，若与asset同时出现时，若小于8kb则自动继承asset-inline，
            //若想其使用asset,则改变范围值如下     默认为4*1024
            parser: {
                dataUrlCondition: {
                    maxSize:4*1024*1024 
                }
            }
        }
    }
}