webpack基本用法
什么是webpack？webpack是静态模块打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或者多个文件。webpack可以处理js/css/图片、图标字体等单位。用于处理开发过程中存在于本地的静态资源。
初始化npm init -y，新建文件webpack.config.js
一、entry & output
entry：入口文件；output：出口文件
单入口与单出口的写法
const path = require('path');
module.exports = {
// 单入口
entry: './src/index.js',
// 出口
output: {
// 单出口文件名称
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
多入口与多出口写法
const path = require('path');
module.exports = {
// 多入口
entry: {
index: './src/index.js',
search: './src/search.js'
},
// 出口
output: {
// 多出口名称
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
};
二、loader
什么是loader？loader就是能够让webpack去处理那些非js文件，例如：图片、css文件等。当然loader也可以处理js文件。被用于转换某些类型的模块。
安装loader依赖npm i --save-dev babel-loader @babel/core @babel/preset-env，在当前文件夹中新建babel.config.json,配置：
{
"presets": ["@babel/preset-env"]
}
在webpack.config.js中配置：
const path = require('path');
module.exports = {
// 入口
entry: {
index: './src/index.js',
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
// 规则
rules: [
{
// 正则所有 JS 文件
test: /\.js$/,
// 排除 node_modules 文件
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
当打包npm run webpack后，会通过webpack.config.js中设置的规则，入口文件夹 src 下面的 index.js 文件就会被 babel-loader 处理，处理完成后会得到出口 dist 文件夹下编译后的 es6 以下的 index.js 文件
安装依赖 core-js ，在入口文件 index.js 中引入import 'core-js/stable'用于处理兼容IE部分语法
三、plugins
plugins(插件)，可以用于执行范围更广的任务，例如：打包优化和压缩，定义环境中的变量等。
安装html-webpack-plugin插件处理html文件：npm install --save-dev html-webpack-plugin
单页面插件配置：
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
// 入口
entry: {
index: './src/index.js',
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
// 插件
plugins: [
// 调用
new htmlWebpackPlugin({
template: './index.html'
})
]
};
多页面插件配置：
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
// 多入口
entry: {
index: './src/index.js',
search: './src/search.js',
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
// 多页面调用插件
plugins: [
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
// 指定引入文件
chunks: ['index'],
// html-webpack-plugin其他
minify:{
// 删除注释
removeComments:true,
// 删除空格
collapseWhitespace:true,
// 删除标签属性值的双引号
removeAttributeQuotes:true
}
}),
new htmlWebpackPlugin({
template: './search.html',
filename: 'search.html',
chunks: ['search']
})
]
};
四、简单使用
1、安装css-loader和mini-css-extract-plugin插件处理css文件：npm install --save-dev css-loader mini-css-extract-plugin
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin插件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
// 入口
entry: {
index: './src/index.js'
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// 处理css文件
{
test: /\.css$/,
// 从右向左执行
use: [miniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
// 处理html文件
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
// 处理css文件
new miniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
2、使用file-loader依赖处理css中本地图片，安装 loader：npm install --save-dev file-loader
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin插件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
// 入口
entry: {
index: './src/index.js'
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// 处理css文件
{
test: /\.css$/,
// 从右向左执行
use: [{
loader: miniCssExtractPlugin.loader,
// 路径
options: {
publicPath: '../'
}
}, 'css-loader']
},
// file-loader 处理css中本地图片
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
// [ext] 代表当前图片的后缀
name: 'images/[name].[ext]'
}
}
}
]
},
plugins: [
// 处理html文件
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
// 处理css文件
new miniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
3、使用html-withimg-loader依赖处理HTML中本地图片，安装 loader：npm install --save-dev html-withimg-loader
const path = require('path');
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin插件
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
// 入口
entry: {
index: './src/index.js'
},
// 出口
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// 处理css文件
{
test: /\.css$/,
// 从右向左执行
use: [{
loader: miniCssExtractPlugin.loader,
// 路径
options: {
publicPath: '../'
}
}, 'css-loader']
},
// file-loader 处理css中本地图片
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
// [ext] 代表当前图片的后缀
name: 'images/[name].[ext]',
// 取消es6模块导出
esModule: false
}
}
},
// html-withimg-loader 处理HTML中的本地图片
{
test: /\.(htm|html)$/,
use: 'html-withimg-loader'
}
]
},
plugins: [
// 处理html文件
new htmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
}),
// 处理css文件
new miniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
4、使用url-loader依赖处理图片文件，安装 loader：npm install --save-dev url-loader，注意：使用url-loader时也要安装file-loader
// url-loader 处理本地图片
module: {
rules: [
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
// [ext] 代表当前图片的后缀
name: 'images/[name].[ext]',
// 取消es6模块导出
esModule: false,
// 小于10KB的图片以Base64方式展示
limit: 10000
}
}
}
]
}
5、使用webpack-dev-server搭建开发环境，安装：npm install --save-dev webpack-dev-server
package.json中添加："dev":"webpack-dev-server --open"
"scripts": {
"webpack": "webpack --config webpack.config.js",
"dev":"webpack-dev-server --open"
},
使用npm run dev运行开发环境
