webpack五大模块
- entry:
打包入口文件,入口文件引用了a文件和b文件,a、b文件又引用了其他文件,这样一层层调用,会将项目中用到的文件生成一个树状的结构图。
- output:
打包资源输出位置,指定打包好的资源输出到哪里,如何命名 - loader:
webpack只能够处理js,json文件,css、img文件需要通过loader翻译成可以处理的文件 - plugin:
插件,可以做一些执行范围更广的任务,如代码压缩 - mode:
(1).development(开发模式):能让代码在本地调试运行
(2).production(生产模式):能让代码优化上线运行的模式
webpack的使用
webpack只能打包js,json文件
data.json
{
"name": "jack",
"age": "18"
}
index.css
body, html {
background-color: Blue;
}
index.js文件
import data from './data.json';
import './index.css';
function add(a,b){
return a+b;
}
console.log(data);
console.log(add(1,2));
打包指令:
webpack ./src/index.js -o ./build --mode=development
// 以./src/index.js 为入口文件开始打包,打包后输出到./build文件夹中, 整体打包环境是开发环境
报错:
可以看到在打包js和json文件时没有出错,打包css文件时报错,这是因为除了js和json文件,其他文件需要通过处理
打包样式资源
这里可以通过配置wenpack.config.js文件来指示webpack执行那些步骤,文件放到根目录下
css文件
css资源是通过loader处理
webpack.config.js
// resolve来拼接绝对路径的方法
const { resolve } = require('path');
module.exports = {
entry: './src/index.js',
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname: 当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
module: {
rules: [
// 详细的loader配置,不同资源需要不同loader处理
{
// 匹配那些文件
test: /\.css$/,
// 使用哪些loader
use: [
// use数组中loader执行顺序:从右到左,从下到上,依次执行
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成common.js模块加载到js中,里面内容是样式字符串
'css-loader'
]
},
]
},
plugins: [
//详细的plugins配置
],
// 模式
mode: 'development'
}
执行命令:webpack
执行结果:
less
less文件比css文件多了一步,即将less文件用less-loader转化成css文件,其他配置与css一样
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less编译成css文件,需下载less-loader和less
'less-loader',
]
}
打包html资源
html资源通过plugins处理
webpack.config.js
/*
loader处理样式资源:1、下载。2、使用。
plugins处理html资源:1、下载。2.引入。3、使用
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
]
},
plugins: [
// 需要下载html-webpack-plugin
// 默认会创建一个空的html文件,引入打包输出的所有资源(js/css)
// 需要有结构的html文件
new HtmlWebpackPlugin({
// 复制 ./src/index.html 文件,并自动引入打包输出的资源
template: './src/index.html'
})
],
mode: 'development'
}
打包图片资源
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
]
},
{
// 处理css中图片资源
// 缺点:默认处理不了html中的图片
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 图片小于8kb,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积更大(文件请求数度更慢)
// 下载url-loader和file-loader
limit: 8*1024,
// 问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片时common.js
// 解析时会出问题
// 解决:关闭url-loader的es6模块化,使用common.js解析
esModule: false,
// 给图片重命名
// [hash:10]取图片hash的前十位
// [ext]:取文件原来拓展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件中的img(负责引入img,从而能被url-loader处理)
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
打包其他资源
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
},
// 打包其他资源,排除css,html,js资源
{
exclude: /\.(css|html|js)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
}
devServer
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
},
// 打包其他资源,排除css,html,js资源
{
exclude: /\.(css|html|js)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
// 开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令, webpack-dev-server
devServer: {
// 项目构建后的路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
open: true
}
}