一、设置非默认配置文件
在项目根目录下新建webpack.dev.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // webpack执行入口
output: {
path: path.resolve(__dirname, './build'), // 输出到哪里，必须是绝对路径
filename: 'index.js'
},
mode: 'development'
};
在package.json文件中新增命令软链
"scripts": {
"test": "webpack",
"dev": "webpack --config webpack.dev.config.js"
},
执行命令
npm run dev
项目根目录下多了build/index.js(打包后的js)
二、配置module
1、file-loader
安装
npm i file-loader -D
配置webpack.config.js
const path = require('path');
module.exports = {
...
module: { // 处理模块
rules: [
{ // 处理图片
test: /\.png$/,
use: ['file-loader']
}
]
}
};
在/src/index.js中新增
import('./logo.png');
执行命令
npm run test
打包成功，dist目录下多了一个图片文件，重命名为hash值
img1
现在我们来使用这张图片
修改/src/index.js(另外在/dist/index.html增加一个id为root的div)
import pic from './logo.png';
var img = new Image();
img.src = pic;
var root = document.getElementById('root');
root.appendChild(img);
打包，刷新浏览器，图片正常显示。
那么我如果要用其他图片格式怎么办呢？
修改webpack.config.js中的匹配规则
test: /\.(png|jpe?g|gif)$/,
以上都不符合你还可以按照以上规则加就行
如果你想让打包出来的图片名称是自己设定的格式，那么请修改webpack.config.js中的配置如下
use: [{
loader: 'file-loader',
options: {
name: '[name]_[hash:8].[ext]'
}
}]
打包，查看生成文件
img2
那么如果我们想要生成的图片文件在一个指定的目录下，就可以这样在webpack.config.js中配置
options: {
name: '[name]_[hash:8].[ext]',
outputPath: 'images/'
}
这样打包的图片就都在/dist/images/下了
字体
在网上下载一个字体文件webfont.woff2，放在src目录下，修改/src/index.css
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('./webfont.woff2') format('woff2')
}
body{
font-family: 'webfont' !important;
font-size: 30px;
background: red;
}
在webpack.config.js中配置loader
{
test: /\.woff2$/,
use: ['file-loader']
}
在/dist/index.html增加p节点输入一些文字，打包，刷新浏览器查看，字体显示出来了。
2、css-loader、style-loader
安装
npm i css-loader -D
npm i style-loader -D
配置webpack.config.js(module下的rules里面)
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
在src下新建index.css
body{
background: red;
}
在/src/index.js中引入index.css
import('./index.css');
打包运行，刷新浏览器查看css生效了，页面背景变成红色。
我们再在src下新建一个a.css
div{
border: 1px blue solid;
}
在/src/index.js中引入a.css
import('./a.css');
打包运行，刷新浏览器查看
img3
发现页面生成了两个style标签
loader是有执行顺序的，自右往左
怎么能把两个标签变成一个标签，去查看文档。这里注意，中文文档可能不是最新的，最好去仓库查看。找到一个选项injectType
修改webpack.config.js
img4
打包，刷新浏览器查看，就只有一个style标签了。
3、less-loader
安装
npm i less-loader -D
在src目录下新建index.less
body{
background: blue;
div{
border: 1px gold solid;
}
}
将/src/index.js中导入的index.css改成index.less
在webpack.config.js中增加配置
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
运行，刷新浏览器查看，页面背景变成了蓝色。sass-loader也可以按照此步骤来使用哦。
4、postcss-loader
安装
npm i postcss-loader autoprefixer -D
在项目根目录下新建postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
// 兼容浏览器最近的2个版本，兼容大于市场1%份额的浏览器
overrideBrowserslist: ['last 2 version', '>1%']
})
]
}
修改/src/index.less
img5
在webpack.config.js中增加postcss-loader
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']
}
运行，刷新浏览器查看
img6
如上图，flex样式有加前缀来兼容某些浏览器
三、plugins
1、html-webpack-plugin
打包指定的html模板文件到指定的目录下，并会插入入口js文件
安装
npm install --save-dev html-webpack-plugin
在src目录下新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js中新增该插件配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
plugins: [ // 插件，作用于webpack构建的整个生命周期
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'happy.html'
})
]
};
打包运行
img7
webpack将/src/index.html处理(插入入口js文件main.js)打包到了/dist/happy.html
该插件支持EJS模板引擎，可以直接写 <%= EJS %>
2、 clean-webpack-plugin
自动在webpack打包前删除/dist目录
安装
npm install --save-dev clean-webpack-plugin
在webpack.config.js中新增该配置
...
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
...
plugins: [ // 插件，作用于webpack构建的整个生命周期
...
new CleanWebpackPlugin()
]
};
注意这里引入CleanWebpackPlugin需要加大括号{}
测试，在/dist目录随便新增一个文件，再执行打包，打包完再看dist目录发现你新增的那个文件不见了。
3、mini-css-extract-plugin
让css代码以独立文件的形式存在
安装
npm install --save-dev mini-css-extract-plugin
在webpack.config.js中新增相应的配置
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...
module: { // 处理模块
rules: [
...
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader, // 用这个就不需要style-loader
'css-loader',
'postcss-loader',
'less-loader'
]
}
]
},
plugins: [ // 插件，作用于webpack构建的整个生命周期
...
new MiniCssExtractPlugin()
]
};
注意，MiniCssExtractPlugin.loader代替了style-loader
打包运行
img8
/src/index.less被打包到/dist/1.css，但是html中并未引用它
名字怎么配置，修改webpack.config.js
new MiniCssExtractPlugin({
filename: '[name]_[chunkhash:8].css'
})
再打包运行
img9
四、sourceMap
源代码与打包后的代码的映射关系，方便在浏览器调试
修改webpack.config.js，开启sourceMap
...
module.exports = {
...
devtool: 'source-map'
};
打包运行
img10
多了一个main.js.map，这是一个源代码与打包代码的映射
我们在index.js中故意写错一个代码，刷新浏览器查看
img11
点击进入index.js:23
img12
这里就能准确地找到错误代码的位置
关闭sourceMap可以修改代码：
devtool: 'none'
devtool还有很多别的选项值，可以试试
网友评论