webpack 安装和配置启动命令
安装
安装之前，需要先初始化项目， 生成package.json文件
- webpack 必须结合 webpack-cli 一起使用
npm init
npm install webpack webpack-cli --save-dev
配置启动命令
- 在package.json 文件的 scripts 字段中配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production", // 配置生产环境
"dev": "webpack --mode development" // 配置开发环境
},
创建入口文件
webpack 默认的入口文件是 src文件夹下的index.js文件
3. 创建src文件夹和 index.js文件
执行命令
- 可以启动命令
npm run build
npm run dev
webpack 引入模块
- webpack 可以识别es6的模块导入和导出
// es6 导出
export function fun(){
}
export let num = 10
export default function(){
}
// es6 导出
function fun(){
}
const num = 100;
export {
fun, num}
// 导入普通模块
import {
fun, num} from 'url'
// 导入默认模块
import a from 'url'
- webpack 可以识别 nodejs的模块的导入和导出
// nodejs 导出模块
// module.exports 一个文件中只能使用一个
module.exports = {
}
module.exports = () => {
}
// exports 一个文件中可以使用多次
exports.key1 = value1
exports.key2 = value2
exports.key3 = value3
// 导入模块
require(url)
- webpack 可以引入第三方模块
npm install 第三方模块 --save/--save-dev
import 自定义模块名 from '模块名'
// 案例-引入jQuery： import $ from "jquery";
webpack 的模块 loader 配置
在项目的根目录下创建一个 webpack.config.js 文件 (webpack 会自动去查找该文件)
webpack 编译 css 文件
css文件可以直接加载
import 'css文件url'
- 安装 css-loader 和style-loader
npm install css-loader style-loader --save-dev
- 配置loader
module.exports = {
// webpack 中的模块配置
module:{
// 模块引用配置规则
rules:[
// 每个对象都是一个功能模块的配置， 比如 css , 后期还有sass， less , 图片， es6及以上转es5等
{
test:/\.css$/, // 匹配文件格式 使用正则匹配文件
use:['style-loader', 'css-loader'] // 使用专用的loader 解析文件
}
]
}
}
webpack 编译 sass 文件
- 安装第三方包 sass 和loader : sass-loader
npm i sass sass-loader --save-dev
- 配置sass-loader
module.exports = {
// webpack 中的模块配置
module:{
// 模块引用配置规则
rules:[
// 每个对象都是一个功能模块的配置， 比如 css , 后期还有sass， less , 图片， es6及以上转es5等
{
test:/\.css$/, // 匹配文件格式 使用正则匹配文件
use:['style-loader', 'css-loader'] // 使用专用的loader 解析文件
},
{
test:/\.(sass|scss)$/,
use:['style-loader', 'css-loader', 'sass-loader']
}
]
}
}
webpack 的插件plugin
使用插件之前先安装，然后在webpack.config.js文件中的plugins 中配置
HTML模板生成插件 html-webpack-plugin
- 安装
npm i html-webpack-plugin --save-dev
- 引入
在 webpack.config.js 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
- 进行配置 plugins 字段中配置
module.exports = {
// webpack 中的模块配置
module:{
// 模块引用配置规则
rules:[
// 每个对象都是一个功能模块的配置， 比如 css , 后期还有sass， less , 图片， es6及以上转es5等
{
test:/\.css$/, // 匹配文件格式 使用正则匹配文件
use:['style-loader', 'css-loader'] // 使用专用的loader 解析文件
},
{
test:/\.(sass|scss)$/,
use:['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
title:'文件标题',
filename:'生成的HTML文件名， 可以自定义',
template:'模板文件url'
})
]
}
清空dist 目录 clean-webpack-plugin
- 安装
npm i clean-webpack-plugin --save-dev
- 引入
// 低版本
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 高版本
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
- 配置
plugins:[
new HtmlWebpackPlugin({
title:'文件标题',
filename:'生成的HTML文件名， 可以自定义',
template:'模板文件url'
}),
new CleanWebpackPlugin()
]
webpack-dev-server 热更新
- 安装模块
npm i --save-dev webpack-dev-server
- 在package.json文件中配置启动命令
"scripts":{
"server":"webpack-dev-server --open"
}
- 在webpack.config.js 文件中配置devServer属性
devServer:{
contentBase:'./dist' // 配置服务器的目录
port:9000 // 配置服务端口
}
- 运行启动命令
npm run server
webpack 的图片文件处理
- 安装url-loader 和 file-loader
npm i url-loader file-loader --save-dev
- 在webpack.config.js中配置 loader
{
test:/\.(jpeg|jpg|png|gif|webp)$/i,
use:[
{
loader:'url-loader',
limit:8192 // 限制图片大小，可选项； 当图片小于limit的限制值时， 会把图片转换为base64, 减少请求次数
name:'[name].[ext]' // 配置输出的图片格式 (输出图片的路径url)（图片名字和扩展名）
// [name] 使用原资源的名字 [ext] 资源的扩展名 [hash] 哈希值
// name:'./images/[name].[ext]' // 配置输出的图片格式 (输出图片的路径url)（图片名字和扩展名）
}
]
}
- 把图片作为模块在入口文件js中进行加载
// 入口 index.js
// 图片作为资源直接加载使用
import './image/img1.jpg'
import './image/img2.png'
// 图片作为模块加载使用
import img1 from './image/img1.jpg';
const img_res = new Image();
img_res.src = img1;
// 添加到页面中
document.body.appendChild(img_res)
webpack 的入口entry配置 和 出口output
- entry 的值是一个字符串， 是入口文件的地址url， 配置单一入口
const path = require('path')
module.exports = {
entry:'./src/index.js',
output:{
// 打包生成的文件名
filename:'index.js',
// 配置输出文件的路径
path:path.resolve(__dirname, './dist');
}
}
- entry 的值是一个数组，数组中的值是一个字符串, 是入口文件的地址url， 配置单一入口
// 把多个入口文件合并成一个文件打包输出
module.exports = {
entry:['./src/index.js', './src/list.js'],
output:{
// 打包生成的文件名
filename:'index.js',
// 配置输出文件的路径
path:path.resolve(__dirname, './dist');
}
}
- entry 的值是一个对象， 对象的key 是打包输出文件的文件名, 配置多入口文件
module.exports = {
entry:{
index:'./src/index.js',
list:'./src/list.js'
},
// 配置多入口的打包输出文件 [name] 映射的是entry 中的key
output:{
filename:'[name].js',
path:path.resolve(__dirname, './dist');
}
}
webpack 配置babel转码es6
- 安装相关依赖包
使用 @babel/polyfill 的原因：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。必须使用 @babel/polyfill，为当前环境提供一个垫片。
所谓垫片也就是垫平不同浏览器或者不同环境下的差异
使用 @babel/plugin-transform-runtime 的原因：Babel 使用非常小的助手来完成常见功能。默认情况下，这将添加到需要它的每个文件中。这种重复有时是不必要的，尤其是当你的应用程序分布在多个文件上的时候。
transform-runtime 可以重复使用 Babel 注入的程序代码来节省代码，减小体积。
如果是用 babel7 来转译，需要安装 @babel/core、@babel/preset-env 和 @babel/plugin-transform-runtime，而不是 babel-core、babel-preset-env 和 babel-plugin-transform-runtime，它们是用于 babel6 的
链接：https://juejin.cn/post/6844903817322954759
核心包的解析：
- @babel/core
- @babel/preset-env: 包含 ES6、7 等版本的语法转化规则
- @babel/plugin-transform-runtime: 避免 polyfill 污染全局变量，减小打包体积
- @babel/polyfill: ES6 内置方法和函数转化垫片
- babel-loader: 负责 ES6 语法转化
npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
- 在 webpack.config.js 中配置loader
{
test:/\.js$/,
exclude: /node_modules/, // 排除依赖包文件夹
use:['babel-loader']
}
- 在项目的根目录下创建一个babel的配置文件 .babelrc
{
"presets": [
"@babel/env"
],
"plugins": ["@babel/plugin-transform-runtime"]
}
https://juejin.cn/post/6844903817343926280#heading-15