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