vue proceso de compilación
Instalar vue
npm install vue
Instalar vue-cli
npm install vue-cli
Cree un nuevo proyecto basado en la plantilla de paquete web
vue init webpack my-project
Realice alguna configuración: como si se debe usar la descripción del elemento del buzón del autor de eslint, etc.
Ingrese al proyecto, instale y ejecute
cd my-project
npm install
npm run dev
Luego configure el paquete web correspondiente a su proyecto (principalmente la configuración del entorno de producción y el entorno de desarrollo, la configuración de algunos recursos estáticos como imágenes css y la instalación de algunos complementos), nodejs, asigne la estructura de directorios, la configuración de nodejs, el archivo de entrada en el archivo .json Main.js, app.vue, etc., qué complementos se necesitan para un desarrollo más rápido, luego vaya a su sitio web oficial y siga los pasos para instalarlo, solo verifique su ejemplo y escríbalo. El otro es analizar los problemas específicos en el desarrollo del proyecto y luego analizarlo. Resolver
Estructura del proyecto
├── build --------------------------------- webpack相关配置文件
│ ├── build.js --------------------------webpack打包配置文件
│ ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│ ├── logo.png ---------------------------------- 项目 logo
│ ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
│ ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│ ├── webpack.base.conf.js --------------------------- webpack基本配置
│ ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│ ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置文件
├── index.js ------------------------------ 开发和生产环境配置文件
├── node_modules ---------------------------- 存放依赖的目录
├── src ------------------------------------- 源码
│ ├── assets ------------------------------ 静态文件
│ ├── components -------------------------- 组件
│ ├── main.js ----------------------------- 主js
│ ├── App.vue ----------------------------- 项目入口组件
│ ├── router ------------------------------ 路由
├── package.json ---------------------------- node配置文件
├── .babelrc--------------------------------- babel配置文件
├── .editorconfig---------------------------- 编辑器配置
├── .gitignore------------------------------- 配置git可忽略的文件
Enfoque de configuración del paquete web
Antes de ver el archivo de configuración del proyecto, primero comprendamos algunas herramientas y complementos de uso común de webpack. Si ya está familiarizado con él, puede omitir esta sección e ir directamente al análisis del archivo de configuración
1. módulo de ruta
path es un módulo en node.js, utilizado para procesar objetos de directorio y mejorar la eficiencia del desarrollo
常用方法：
path.join(): 用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix 系统是 ”/“，Windows系统是 ”\“
path.resolve() 用于将相对路径转为绝对路径
常使用的文件路径
__dirname: 总是返回被执行的 js 所在文件夹的绝对路径
__filename: 总是返回被执行的 js 的绝对路径
process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
2.proceso
El objeto de proceso es un objeto global de Nodo y proporciona información sobre el proceso de Nodo actual.
process 对象提供一系列属性，用于返回系统信息
process.argv：返回当前进程的命令行参数数组。
process.env：返回一个对象，成员为当前Shell的环境变量，比如process.env.HOME
process.pid：当前进程的进程号
3.Mapa fuente == Fuente
En pocas palabras, el mapa de origen es un archivo de información que almacena información de ubicación. Es decir, cada posición del código convertido corresponde a la posición antes de la conversión. Con él, cuando se produce un error, la herramienta de depuración mostrará directamente el código original en lugar del código convertido. Sin duda, esto trajo una gran comodidad a los desarrolladores. Hay 7 modos de SourceMap en la herramienta de desarrollo de webpack
| Patrón | Explicar |
|---|---|
| eval | Cada módulo se encapsulará en evaluación, se ajustará y se ejecutará, y se agregará un comentario al final @@ sourceURL |
| mapa fuente | Genere un archivo SourceMap. |
| mapa-fuente-oculto | Igual que el mapa fuente, pero no se agregarán comentarios al final del paquete. |
| mapa fuente en línea | Genere un archivo SourceMap en forma de DataUrl. |
| mapa-fuente-eval | Eval () ejecutará cada módulo y generará un SourceMap en forma de DataUrl. |
| mapa-fuente-barato | Genere un archivo SourceMaps sin información de columna (asignaciones de columnas), excluyendo el mapa fuente del cargador (como el mapa fuente de babel) |
| mapa-fuente-módulo-barato | Genere un archivo SourceMaps sin asignaciones de columnas, y el mapa fuente del cargador también se simplifica para contener solo las filas correspondientes. |
4. combinación de webpack
Los objetivos de construcción del desarrollo y la producción son muy diferentes. En el entorno de desarrollo, necesitamos tener un poderoso mapa fuente y un servidor localhost con capacidades de recarga en vivo o reemplazo de módulos activos. En el entorno de producción, nuestro objetivo es centrarnos en paquetes más pequeños, mapas de origen más ligeros y recursos más optimizados para mejorar los tiempos de carga. Debido a la separación lógica, generalmente recomendamos escribir configuraciones de paquete web separadas para cada entorno. Para la parte de configuración general, extrajimos un archivo común y, a través de la configuración "general" de la herramienta de combinación de paquetes web, no tuvimos que repetir el código en la configuración específica del entorno.
5. ExtractTextWebpackPlugin
El complemento ExtractTextWebpackPlugin se usa generalmente para separar los archivos de estilo. Los archivos separados no se incrustarán en el paquete JS, sino que se colocarán en un archivo separado. Cuando el archivo de estilo es relativamente grande, el estilo se puede cargar por adelantado. El ejemplo de configuración es el siguiente
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
Moverá el * .css al que se hace referencia en todos los fragmentos de entrada (fragmentos de entrada) para separar los archivos CSS. Por lo tanto, sus estilos ya no se integrarán en el paquete JS, sino que se colocarán en un archivo CSS separado (es decir, styles.css). Si el tamaño del archivo de estilo es grande, esto se cargará más rápido por adelantado, ya que el paquete CSS se cargará en paralelo con el paquete JS.
6.html-webpack-plugin
Si tiene varios puntos de entrada de paquete web, todos estarán dentro de las etiquetas de script en el archivo HTML generado. Si tiene activos CSS en la salida de webpack (por ejemplo, usando ExtractTextPlugin para extraer CSS), estos se incluirán en las etiquetas en el encabezado HTML. Por lo general, en desarrollo, para evitar CDN y la memoria caché del navegador, generalmente enviamos el archivo bundle.js más un valor hash. Por ejemplo [hash].bundle.js, usar html-webpack-plugin puede brindarnos un El esperanzado bundle.js se refiere al archivo html.
7.optimize-css-assets-webpack-plugin
Utilizado para optimizar el CSS extraído del script, el ejemplo de configuración es el siguiente
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}
]
},
plugins: [
new ExtractTextPlugin('styles.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
]
};
8.CopiaWebpackPlugin
CopyWebpackPlugin no es difícil de ver su función desde el nombre del complemento, generalmente utilizado para copiar recursos, clasificar e integrar archivos de proyecto
9.friendly-errors-webpack-plugin
friendly-errors-webpack-plugin puede ver mejor las advertencias y errores de webapck ejecutándose en el terminal, mejorar la experiencia de desarrollo
10.UglifyjsWebpackPlugin
UglifyjsWebpackPlugin se usa para comprimir código js
11. Servidor en desarrollo (DevServer)
Para los servicios de proyectos webpack, generalmente lo usamos para configurar la actualización en caliente del proyecto, la compresión del servicio, la agencia del proyecto, etc. en la fase de desarrollo. A continuación se presentan varios parámetros de configuración comúnmente utilizados.
const config = require('../config')
// config 文件里做了用户自定的服务参数配置
devServer: {
clientLogLevel: 'warning', // 在开发攻击的控制台中显示信息，便于开发调试，你可以将参数配置成 "none" 来进行关闭
historyApiFallback: { // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true, //启用项目的热刷新，即模块热替换特性
contentBase: false, // 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。这里禁用，因为配置了 CopyWebpackPlugin 的使用
compress: true,
host: HOST || config.dev.host, //指定使用一个域名。默认是 localhost
port: PORT || config.dev.port, //指定要监听请求的端口号：
open: config.dev.autoOpenBrowser, //open 参数配置，如果配置成 true ，项目启动后会自动打开浏览器
overlay: config.dev.errorOverlay //当有错误或则警告的时候在页面上显示一个全屏的遮罩提示
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath, //此路径下的打包文件可在浏览器中访问
proxy: config.dev.proxyTable, //代理API的请求
quiet: true, //启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台,特别是使用了 FriendlyErrorsPlugin 插件的时候
watchOptions: { //与监视文件相关的控制选项。是否使用轮询
poll: config.dev.poll,
}
},
Análisis de archivo de configuración
Al comprender la configuración anterior, deberíamos tener una cierta comprensión de los complementos y herramientas de uso común de webpack, echemos un vistazo a la configuración generada por el andamio vue-cli para nosotros
config.js
'use strict'
const path = require('path') // 引用项目的 path 模块
module.exports = {
dev: {
// 路径配置
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// 各种开发服务配置
host: 'localhost', // 开发环境域名 可以被 node 全局变量process.env.HOST 重写
port: 8080, //配置开发服务端口，可以被 node 全局变量 process.env.PORT 重写, 需要使用未被占用的端口
autoOpenBrowser: false, //服务启动是否自动代开浏览器
errorOverlay: true, //是否在发生错误的时候，在页面整屏增加一个错误遮罩
notifyOnErrors: true, //是否通知错误 ，在我们的项目配置中和 friendly-errors-webpack-plugin 结合使用
poll: false, // 服务监听是否轮询操作
// 配饰是否使用 Eslint Loader 进行语法检测
// 如果使用，在开发构建阶段，会对你的代码会进行检测
// 检测出来的警告和错误会白展示在开发工具的控制台
useEslint: true, //进行语法检测
// 配置是否将 eslint 语法检测的警告和错误展示在页面整屏的遮罩上
showEslintErrorsInOverlay: false, // 语法检测的警告和错误不展示在遮罩上
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
// 在上面的介绍中，我们知道 source map 是用来将我们构建后被转化的代码对应构建前的代码，便于 debug
// cheap-module-eval-source-map 和我们介绍的 cheap-module-source-map 很类似，但是 SourceMap 会被作为数据添加到包中
devtool: 'cheap-module-eval-source-map',
// 如果你的开发工具不能进行 vue-files 的 debug ，可以将以下设置设置成 false
cacheBusting: true,
cssSourceMap: true
},
build: {
// index.html 文件模板
index: path.resolve(__dirname, '../dist/index.html'),
// 打包路径配置
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
//生产环境 source map 配置
productionSourceMap: true,
devtool: '#source-map',
// 因为很多的主流服务都会 通过 gzip 压缩过你的所有静态资源，我们的配置默认不开启 gzip
// 如果要设置成开启,请先确保已经安装好 compression-webpack-plugin 插件
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// 启动 build 命令的时候，额外添加一个参数，打包后会自动生成一个分析报告文件，例如 npm run build --report ，可以通过配置 true ，false 来关闭
bundleAnalyzerReport: process.env.npm_config_report
}
}
check-version.js
Este archivo se usa principalmente para verificar si las versiones de nodo y npm en el entorno actual son consistentes con lo que necesitamos.
'use strict'
const chalk = require('chalk') // 改变命令行中的字体颜色，大致这样用chalk.blue('Hello world')
const semver = require('semver') //是用来对特定的版本号做判断的
const packageConfig = require('../package.json') // 项目 npm 配置文件，获取依赖及版本信息，requrie返回的就是json对象
const shell = require('shelljs') //用来执行Unix系统命令，调用系统命令更加方便
//把cmd这个参数传递的值转化成前后没有空格的字符串，也就是版本号
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version), // 提取进程版本信息转化成规定格式，也就是 ' =v1.2.3 ' -> '1.2.3' 这种功能
versionRequirement: packageConfig.engines.node // package.json 的 node 的版本信息
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'), //当前的版本信息
versionRequirement: packageConfig.engines.npm //package.json 的 node 的版本信息
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
// 如果当前版本号不符合 package.json 要求的版本号，红色表示当前版本信息，绿色表示要求的版本信息，添加到 warnings 待输出
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
//输出版本号不相符的提示 warnings
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
build.js
'use strict'
//打包前判断当先开发环境的 node 和 npm 版本和 package.json 要求的时候一样
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora') // 在用户打包的时候能够让用户知道正在进行，一个加载中的样式，转啊转
const rm = require('rimraf') //这个模块是用来清除之前的打的包，因为在vue-cli中每次打包会生成不同的hash
const path = require('path') //node 路径模块，便于我们操作文件路径
const chalk = require('chalk') //带颜色的输出模块，能在控制台中输出不同的样色
const webpack = require('webpack') //webpack 不解释
const config = require('../config') // 项目中的配置文件，