webpack之webpack.config.js配置
wbepack.config.js webpack的配置文件详解:
作用: 指示 webpack 干那些活(当你运行 webpack 指令时, 会加载里面的配置)
所有构建工具都是基于node.js平台运行的~模块化默认采用commonjs,
概念:我们创建的src文件是我们写项目的源代码,用的是ES6模块化
而wbepack.config.js文件是我们写配置的源代码,默认用的是commonjs
使用webpack配置文件进行打包
首先在我们原来的webpack-dome项目中创建一个webpack.config.js文件
然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:
const path = require('path') // 引用path模块
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/index.js",
// 打包后的出口文件
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'build'),
// 输出的文件名称
filename:'build.js',
},
// 使用开发模式打包
mode:"development"
}
/*
npm安装时-S -D作用及区别:
-S 即--save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D 即--dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel,sass-loader这些解析器
打包是在npm上运行命令, 一般来说你在配置完成 webpack.config.js 后,你打包时执行的命令是webpack ,但你也可以执行 npm run build 来进行打包,
如何实现: 在package.json中的scripts下多加一行 "build": "webpack" ,就可以使用 npm run build
他们的区别:
在终端直接执行webpack命令,使用的是全局安装的webpack,
当在package.js中定义了scripts时, 其包含了webpack命令,那么使用的是局部的webpack
运行命令
开发环境: webpack ./src/index.js -o ./build/build.js --mode=development
生产环境: webpack ./src/index.js -o ./build/build.js --mode=production
添加能使css一起打包的插件: npm i css-loader style-loader -D
添加能使scss一起打包的插件: npm install sass-loader node-sass webpack -D 因为你刚刚下载过 css-loader style-loader所以不用再次下载了
添加能使html一起打包的插件: npm i html-webpack-plugin -D
添加能使图片打包的插件: npm i url-loader file-loader -D
添加能使html中图片打包的插件: npm i html-loader -D
添加能使浏览器自动更新(刷新)的插件: npm i webpack-dev-server -D
*/
/*
loader 的使用: 1)下载 2)使用 (配置loader)
plugins 的使用: 1)下载 2)引用 3)使用
wbepack.config.js webpack的配置文件
作用: 指示 webpack 干那些活(当你运行 webpack 指令时, 会加载里面的配置)
所有构建工具都是基于node.js平台运行的~模块化默认采用commonjs,
概念:我们创建的src文件是我们写项目的源代码,用的是ES6模块化
而wbepack.config.js文件是我们写配置的源代码,默认用的是commonjs
*/
所以,我在这里运行的命令是:
npm run build
loader的使用
在原来的基础上在src文件夹中创建一个css文件，然后在index.js中引入
为什么要用loader,因为webpack中默认是不支持js中引入css的，所以要用到 loader
然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:
const path = require('path') // 引用path模块
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/index.js",
// 打包后的出口文件
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'build'),
// 输出的文件名称
filename:'build.js',
},
// loader的配置
module:{
rules:[
// 详细loader配置
// 打包css的配置
{
// 使用正则表达式,匹配那些文件
test: /\.css$/,
use:[
// use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
// 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
'style-loader',
// 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
'css-loader'
]
}
]
},
// 使用开发模式打包
mode:"development"
}
添加能使css一起打包的插件,运行命令为: npm i css-loader style-loader -D
执行打包命令: npm run build 查看结果
loader的使用之打包scss
在原来的基础上在src文件夹中创建一个scss文件，然后在index.js中引入
然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:
const path = require('path') // 引用path模块
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/index.js",
// 打包后的出口文件
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'build'),
// 输出的文件名称
filename:'build.js',
},
// loader的配置
module:{
rules:[
// 详细loader配置
// 打包css的配置
{
// 使用正则表达式,匹配那些文件
test: /\.css$/,
use:[
// use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
// 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
'style-loader',
// 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
'css-loader'
]
},
// 打包scss的配置
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
// 是数组,代表的是要使用多个loader处理,用use
use: [
'style-loader',
'css-loader',
// 将scss文件编译成css文件
'sass-loader'
]
}
]
},
// 使用开发模式打包
mode:"development"
}
添加能使scss一起打包的插件,运行命令为: npm install sass-loader node-sass webpack -D
因为你刚刚下载过 css-loader style-loader所以不用再次下载了
执行打包命令: npm run build 查看结果
打包html资源的插件使用
作用: 将src的html文件进行打包, 在打包完成后在build文件夹中生成一个html文件, 并且会对这个html文件做处理,自动帮你把使用的文件引用进去
然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:
const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/index.js",
// 打包后的出口文件
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'build'),
// 输出的文件名称
filename:'build.js',
},
// loader的配置
module:{
rules:[
// 详细loader配置
// 打包css的配置
{
// 使用正则表达式,匹配那些文件
test: /\.css$/,
use:[
// use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
// 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
'style-loader',
// 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
'css-loader'
]
},
// 打包scss的配置
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
// 是数组,代表的是要使用多个loader处理,用use
use: [
'style-loader',
'css-loader',
// 将scss文件编译成css文件
'sass-loader'
]
}
]
},
// plugins的配置
plugins:[
// 详细plugins的配置
// 因为是直接引的,所以 new 就好了
// 功能:默认会创建一个空的HTML文件,自动引入打包输出的所有资源(JS/CSS)
new HtmlWebpackPlugin({
// 复制 './src/index.html'文件,并自动引入打包输出的所有资源(JS/CSS)
template:'./src/index.html'
})
],
// 使用开发模式打包
mode:"development"
}
添加能使html一起打包的插件,运行命令为: npm i html-webpack-plugin -D
执行打包命令: npm run build 查看结果
打包图片资源文件
首先在src文件夹中复制三张图片, 之后在sass中引入, 最后在html文件中展示
然后就可以在webpack.config.js文件中写配置代码, 代码内容如下:
const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/index.js",
// 打包后的出口文件
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'build'),
// 输出的文件名称
filename:'build.js',
},
// loader的配置
module:{
rules:[
// 详细loader配置
// 打包css的配置
{
// 使用正则表达式,匹配那些文件
test: /\.css$/,
use:[
// use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
// 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
'style-loader',
// 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
'css-loader'
]
},
// 打包scss的配置
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
// 是数组,代表的是要使用多个loader处理,用use
use: [
'style-loader',
'css-loader',
// 将scss文件编译成css文件
'sass-loader'
]
},
{
// 问题:默认处理不了html中img图片
// 处理图片资源
test: /\.(jpg|png|gif)/,
// 使用一个loader时,直接写就行了
loader:'url-loader',
options:{
// 图片大小小于8KB,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会增大, 就会导致文件请求速度更慢
limit: 8 * 1024,
// 问题: 因为url-loader默认使用es6模块化解析,
// 而html-loader引入图片commonjs
// 解析时会出问题: [object Module]
// 解决: 关闭url-loader的es6模块化, 使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]去文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test:/\.html$/,
// 处理html文件的img图片 (负责引入img, 从而能被url-loader进行处理)
loader:'html-loader'
}
]
},
// plugins的配置
plugins:[
// 详细plugins的配置
// 因为是直接引的,所以 new 就好了
// 功能:默认会创建一个空的HTML文件,自动引入打包输出的所有资源(JS/CSS)
new HtmlWebpackPlugin({
// 复制 './src/index.html'文件,并自动引入打包输出的所有资源(JS/CSS)
template:'./src/index.html'
})
],
// 使用开发模式打包
mode:"development"
}
添加能使图片打包的插件,运行命令为: npm i url-loader file-loader -D
添加能使html中图片打包的插件,运行命令为: npm i html-loader -D
执行打包命令: npm run build 查看结果
热更新 devServer
通过devServer进行热更新, 代码内容如下:
const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/index.js",
// 打包后的出口文件
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'build'),
// 输出的文件名称
filename:'build.js',
},
// loader的配置
module:{
rules:[
// 详细loader配置
// 打包css的配置
{
// 使用正则表达式,匹配那些文件
test: /\.css$/,
use:[
// use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
// 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
'style-loader',
// 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
'css-loader'
]
},
// 打包scss的配置
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
// 是数组,代表的是要使用多个loader处理,用use
use: [
'style-loader',
'css-loader',
// 将scss文件编译成css文件
'sass-loader'
]
},
{
// 问题:默认处理不了html中img图片
// 处理图片资源
test: /\.(jpg|png|gif)/,
// 使用一个loader时,直接写就行了
loader:'url-loader',
options:{
// 图片大小小于8KB,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会增大, 就会导致文件请求速度更慢
limit: 8 * 1024,
// 问题: 因为url-loader默认使用es6模块化解析,
// 而html-loader引入图片是commonjs
// 解析时会出问题: [object Module]
// 解决: 关闭url-loader的es6模块化, 使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]去文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test:/\.html$/,
// 处理html文件的img图片 (负责引入img, 从而能被url-loader进行处理)
loader:'html-loader'
}
]
},
// plugins的配置
plugins:[
// 详细plugins的配置
// 因为是直接引的,所以 new 就好了
// 功能:默认会创建一个空的HTML文件,自动引入打包输出的所有资源(JS/CSS)
new HtmlWebpackPlugin({
// 复制 './src/index.html'文件,并自动引入打包输出的所有资源(JS/CSS)
template:'./src/index.html'
})
],
// 使用开发模式打包
mode:"development",
// 开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
// 用简单概括就是: 热更新
// 特点:只会在内存中编译打包,不会有任何输出
// 启动指令: webpack-dev-server 你也可以在package.json文件中重新修改指令
devServer:{
contentBase:path.resolve(__dirname,'build'),
// 启动gzip压缩
compress:true,
// 修改端口号
port:8080,
//自动打开浏览器
open:true
}
}
添加能使浏览器自动更新(刷新)的插件,运行命令为: npm i webpack-dev-server -D
执行命令: webpack-dev-server 启动服务器,修改代码查看结果
注意
1.各种命令不要写错
2.有报错学会翻译看报错, 多去百度