系列博客链接
- webpack4入门学习笔记(一)
- webpack4入门学习笔记(二)
- webpack4入门学习笔记(三)--Babel的使用
- webpack4入门学习笔记(四)--Tree Shaking与拆分配置文件
代码
初始化项目
-
创建项目
mkdir webpack4-demo
cd webpack4-demo -
npm init -y -
安装
npm install webpack --save-dev -
安装指定版本
npm install --save-dev webpack@<version> -
webpack 4+ 版本，还需要安装webpack-cli
npm install webpack-cli --save-dev
建议本地安装webpack和webpack-cli
目前webpack最新版本为：4.30.0，也是本文学习webpack使用的版本
项目目录结构
项目结构.png
执行npx webpack index.js命令，生成dist目录，dist目录下是对index.js打包后得到的文件，默认是main.js文件。
webpack4的简单配置
entry和output配置
webpack.config.js文件
const path = require('path')
module.exports={
mode: 'development', //development: 开发环境 production：生产环境
//入口文件配置
//entry: './src/index.js',
//等价于
/*entry: {
main: './src/index.js'
},*/
entry: {
index: './src/index.js'
},
//打包完成后文件存放位置配置
output: {
//filename 设置打包后文件的名字
//如果不设置filename，则文件的名字跟入口文件路径的属性名一样
filename: 'bundle.js',
//path 设置打包完成后文件存放路径
path: path.resolve(__dirname,'dist')
}
}
在项目根目录下新建src文件夹，在src文件夹下新建index.js(入口文件)文件
执行npx webpack命令
npx webpack等价于npx webpack --config webpack.config.js
当配置文件命名为webpack.config.js时可以省略--config *.js直接执行npx webpack即可，否则执行npx webpack --config 配置文件名。
结果
在package.json中配置'script'来执行npx webpack命令。
"scripts": {
"start": "webpack"
}
添加"start": "webpack"，运行npm run start效果等价于执行npx webpack命令。
配置webpack.config.js的modoule对象
modoule对象主要是对loader的配置
file-loader的使用
安装
file-loader
npm i file-loader --save-dev
webpack.config.js文件
const path = require('path')
module.exports={
mode: 'development', //development: 开发环境 production：生产环境
//入口文件配置
//entry: './src/index.js',
//等价于
/*entry: {
main: './src/index.js'
},*/
entry: {
index: './src/index.js'
},
//打包完成后文件存放位置配置
output: {
//filename 设置打包后文件的名字
//如果不设置filename，则文件的名字跟入口文件路径的属性名一样
filename: 'bundle.js',
//path 设置打包完成后文件存放路径
path: path.resolve(__dirname,'dist')
},
module: {
rules:[
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]', //对打包后的图片命名
outputPath: 'images/' //打包后图片放的位置 dist\images
}
}
}
]
}
}
index.js文件
//index.js
//import导入图片
import image from './images/11.png'
let img=new Image()
img.src=image
document.body.append(img)
npm run start后的目录结构
11.png
在dist目录下出现了images目录和图片，创建index.html，引入js文件，在浏览器中打开就可以看到图片。
url-loader的使用
url-loader安装
npm i url-loader -D
url-loader的作用跟'file-loader'的作用很类似
webpack.config.js文件的module对象中添加url-loader配置
module: {
rules:[
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]', //对打包后的图片命名
outputPath: 'images/', //打包后图片放的位置 dist\images
limit: 2048
//1024 == 1kb
//小于200kb时打包成base64编码的图片否则单独打包成图片
}
}
}
]
}
}
url-loader打包的图片是字符串，base64编码的图片，并且打包进index.js文件中。
limit属性：当图片大小大于属性值时打包成单独的图片，否则打包成base64编码的图片。
因为base64编码的图片比较大，所以图片比较小时打包成base64编码的图片，图片比较大时单独打包成一张图片。
对css和scss的打包
安装相应的loader
npm i css-loader style-loader -D
npm i node-sass sass-loader -D
npm i postcss-loader -D
npm i autoprefixer -D
postcss-loader和autoprefixer配合使用可以在打包过程中自动添加前缀
在项目根目录下新建postcss.config.js，配置如下
//postcss.config.js
module.exports={
plugins: [
require('autoprefixer')
]
}
在webpack.config.js文件的module对象中添加配置
module:{
rules:[
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
//加前缀 npm i autoprefixer -D
//在项目根目录下配置postcss.config.js文件
]
},
{
test: /\.scss$/,
use:[
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
//importLoaders
//用于配置css-loader作用于@import的资源之前有多少个loader先作用于@import的资源
}
},
'postcss-loader',
'sass-loader'
]
}
]
}
//index.js
import './style.css'
import image from './images/11.png'
import './index.scss'
let img=new Image()
img.src=image
let root=document.getElementById('root')
root.append(img)
css模块化
//webpack.config.js
module:{
rules: [
{
test: /\.scss$/,
use:[
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
//importLoaders
//用于配置css-loader作用于@import的资源之前有多少个loader先作用于@import的资源
modules: true //加载css模块化打包，避免样式文件之间相互影响
}
},
'postcss-loader',
'sass-loader'
]
}
]
}
//index.js
import image from './images/11.png'
import style from './index.scss'
let img=new Image()
img.src=image
//style.img .img是scss文件中写好的类名
img.classList.add(style.img)
let root=document.getElementById('root')
root.append(img)
//scss
.img{
width: 150px;
height: 150px;
border: 10px solid goldenrod;
background: red;
border-radius: 30%;
}
结果
可以看到添加了一个class，类名是一串比较复杂的字符串，从而避免这个样式对别的元素产生影响。
网友评论