共计 5354 个字符，预计需要花费 14 分钟才能阅读完成。
webpack
webpack_ 是一个古代 JavaScript 应用程序的_动态模块打包器(module bundler)_。当 webpack 解决应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_，其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 _bundle_。
一. 装置 webpack
npm init -y初始化我的项目 npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0 -D 这里我指定了版本号 因为他们三个是须要相互依赖的，版本不对启动时会报错
二. 配置的前置条件
一. 新建 build 文件夹
-
build
- webpack.base.js // 兼容开发环境和生产环境的配置
- webpack.prod.js // 生产环境的配置
- webpack.dev.js // 开发环境的配置
二. 在根目录新建 src 文件夹
-
src
- index// 主入口文件，相当于 vue 中的 main.js
三. 配置 package.json
新增 scripts 配置
"scripts": {
"dev": "webpack-dev-server --env=dev --config build/webpack.base.js",
"build": "webpack --env=prod --config build/webpack.base.js"
}-
dev 的配置
- webpack-dev-server：应用下面咱们装置的 webpack-dev-server 插件帮咱们本人起一个服务
- –env 是前面用来辨别环境的标识
- –config build/webpack.base.js：是运行此命令时启动该文件
-
prod 的配置
- webpack: 打包命令
- 前面两个与 dev 的配置雷同
三. 配置进口入口及依据执行的命令合并
webpack.base.js
let dev = require('./webpack.dev');// 引入开发环境配置
let prod = require('./webpack.prod');// 引入生产环境配置
let {resolve} = require('path');// 应用 path.resolve 将门路解析成绝对路径
let {merge} = require('webpack-merge');// 执行 npm i webpack-merge - D 装置合并文件的插件
module.exports = (env) => {//env 为下面设置的 --env=xxx
let isDev = env === 'dev' ? true : false;// 判断如果是开发环境则返回 true 否则返回 false
let base = {// 配置兼容开发和生产
entry: resolve(__dirname, '../src/index.js'),// 入口文件
output: {// 进口文件
filename: 'bundle.js',// 生成的 js 文件名
path: resolve(__dirname, '../dist')// 生成在哪个目录下
}
}
isDev ? merge(base, dev) : merge(base, prod);// 依照传进来的参数进行合并
}webpack.dev.js
module.exports={mode:'development'}webpack.prod.js
module.exports={mode:'production'}通过下面的配置执行 npm run build 就会打包成如下文件目录
四. html-webpack-plugin 和 clean-webpack-plugin
html-webpack-plugin:(1)为 html 文件中引入的内部资源如 script、link 动静增加每次 compile 后的 hash，避免援用缓存的内部文件问题 (2) 能够生成创立 html 入口文件，比方单页面能够生成一个 html 文件入口
clean-webpack-plugin: 每次打包前先革除文件
1. 装置这两个插件
npm i html-webpack-plugin clean-webpack-plugin
2. 引入插件
CleanWebpackPlugin 生产环境才用的到所以只在生产环境引入即可
webpack.base.js
let HtmlWebpackPlugin = require('html-webpack-plugin');webpack.prod.js
let {CleanWebpackPlugin} = require('clean-webpack-plugin');3. 应用插件
webpack.base.js
在入口进口的平级减少以下内容
plugins:[
new HtmlWebpackPlugin({
// 不写会默认为生成的名为 index.html
filename: 'index.html',
// 应用的模板
template:resolve(__dirname,'../index.html')
})
]webpack.prod.js
plugins:[new CleanWebpackPlugin()
]4. 测试以上两个插件
上图中 dist 文件夹中有一个 4444.js 的文件, 咱们在根目录创立一个 index.html 模板
执行打包命令 npm run build 生成如下文件
咱们看到了下面的 4444.js 文件曾经被革除，并且生成了 index.html，index.html 会主动引入文件夹下的 bundle.js
js
因为 webpack4 中曾经内置了配置 js 和压缩 js，这里就不再配置 js 了。
配置 css 和 less
1. 装置 loader
npm install style-loader css-loader less-loader less -D2. 配置 loader
在 webpack.base.js 中入口进口同级下配置 module 模块
module:{
rules:[
//use 数组中的执行程序是从右向左
{test:/.css$/, use:['style-loader','css-loader']},
{test:/.less/, use:['style-loader','css-loader','less-loader']}
]
}3. 测试 css
- 1 我的项目中新建 css 文件夹
- 2 index.js
import './css/css.css'
- 3 执行打包命令
测试通过
4. 测试 less
- 1 新建 less 文件
- 2 index.js
import './less/less.less'
- 3 执行打包命令
测试通过
5. 抽离 css
- 1 装置插件
npm i mini-css-extract-plugin
- 2 引入插件
webpack.prod.jslet MiniCssExtractPlugin = require('mini-css-extract-plugin');
- 3 应用插件
module: {
rules: [{test:/.css$/,use:[MiniCssExtractPlugin.loader,'css-loader']},
{test:/.less/, use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']},
]
},plugins:[
new MiniCssExtractPlugin({filename:'static/css/[name].[hash].css'
})
]- 4 index.js 引入 css 和 less 文件
import './css/css.css';
body{background: pink;}
import './less/less.less';
@mainColor:#000;
html{background: @mainColor;}- 5 打包
6 主动增加前缀兼容浏览器
- 1 装置插件
npm i postcss-loader autoprefixer- 2 配置 postcss.config.js
1 在根目录下新建 postcss.config.js 文件，配置如下
module.exports={plugins:[require('autoprefixer')]
}2 在 package.json 配置如下
"browserslist": [
"defaults",// 代表着寰球超过 1% 人应用的浏览器
"not ie <= 8",// 示意所有浏览器兼容到最初两个版本
"last 2 versions"// 示意 IE 浏览器版本大于 8（实则用 npx browserslist 跑进去不蕴含 IE9）]3 批改 webpack.prod.js 文件
{test:/.css$/, use:['style-loader','css-loader','postcss-loader']},
{test:/.less/, use:['style-loader','css-loader','less-loader','postcss-loader']},4 测试
在下面的 css 文件和 less 文件写下 transform 属性打包之后的后果
7 压缩 css
- 1 装置插件
npm i optimize-css-assets-webpack-plugin- 2 引入插件
webpack.prod.js
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');- 3 应用插件
在 plugins 中退出
new OptimizeCssAssetsWebpackPlugin()- 4 打包测试
配置解析图片
- 1 装置所须要的插件
npm i url-loader file-loader- 2 批改 index.js
import img from './image/earth.jpg';
let imgId = document.getElementById('image');
let image = new Image();
image.src = img;
imgId.appendChild(image);- 3 配置 webpack.base.js
在 module.rules 中退出
{test: /.(jpg|png|gif)$/,
use: {
loader:'url-loader',
options:{
outputPath:'static/image',// 打包生成的门路
name:'[name].[ext]'
}
}
}- 4 测试
打包胜利并且能在浏览器失常显示
解析 svg 图标
1. 在 webpack.base.js 中的 module 退出
{test:/.(ttf|eot|woff|woff2|svg)$/,
use:[
{
loader:'file-loader',
options:{
outputPath:'static/image',
name:'[name].[ext]'
}
}
]
}2. 测试
- 1 index.html
<div id="svg"></div>
- 2 index.js
import add from './svg/add.svg'
let svgBox = document.getElementById('svg');
let svg = new Image();
svg.src = add;
svgBox.appendChild(svg);-3 浏览器显示
解析 vue 文件
- 1 装置 vue 所须要的插件
npm i vue-loader vue-template-compiler vue vue-loader/lib/plugin- 2 批改配置
module 中的 rules 退出{test: /.vue$/, use: 'vue-loader'}
- 3 引入解析 vue 的插件并应用
let VueLoaderPlugin = require('vue-loader/lib/plugin')在 plugins 中退出
new VueLoaderPlugin()- 4 因为引入 vue 咱们通常应用
import Vue from 'vue'其实他是引入的vue/dist/vue.js这个门路，所以咱们须要在 webpack 中配置一下，在入口进口同级退出
resolve: {
alias: {// 起一个别名
'vue': 'vue/dist/vue.js'
}
},- 5 测试
index.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
components: {App},
template: '<App/>'
});index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-vue</title>
</head>
<body>
<div id="app"></div>
</body>
</html>app.vue
<template>
<div id="app">666</div>
</template>
<script>
export default {name: "App"}
</script>
webpack 解决跨域申请
webpack.dev.js
devServer:{
proxy:{
'/api':{
target:'xxx',// 要申请的接口
pathRewrite:{'/api':''}// 重写端口（申请时把 api 置空）}
}
}一个简略的应用于 vue 的 webpack 配置
