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 } } } } }
