предисловие
Прежде всего поздравляю всех с Праздником Фонарей.Я давно не писал статей в последнее время.Я просто воспользовался тем,что в последние дни только вышел на работу,а вождь еще не пришел , поэтому я тайно написал блог о создании vue с помощью webpack. Поскольку компания часто использует vue, создание проектов vue с помощью vue-cli кажется немного раздутым, и я чувствую, что лучше настраивать его самостоятельно, поэтому у меня есть это руководство. Из-за ограниченного уровня вы можете поправить меня и вместе добиться прогресса.
Новый проект
1. Создайте новую папку с именем webpackconfig.
2. Используйте команду
npm init -yСгенерируйте package.json в папке конфигурации webpack
3. Загрузите пакет зависимостей
npm i webpack webpack-dev-server webpack-cli -D4. Создайте новую папку src и создайте файл main.js в src.
alert(1)5. Создайте новый файл webpack.config.js.
файл webpack.config.js
var path = require('path');
var config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname + '/dist'),//打包生成文件地址
filename: '[name].build.js',//生成文件ming
publicPath: '/dist/'//文件输出的公共路径
}
}
module.exports = config;
запись: импортировать файлы, метод записи объекта может импортировать несколько файлов
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}вывод: выходной адрес файла
путь: адрес выходного файла
имя файла: имя выходного файла
publicPath: путь к выходному файлу
6. Создайте новый файл index.html и импортируйте main.js
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="/dist/main.build.js"></script>
</body>
</html>7. Настройте package.json
"dev": "webpack-dev-server --open --hot",
"build": "webpack --mode=development --progress --hide-modules",запустить после настройки
npm run devоткроет службу и всплывет 1
Но в вебпаке будет предупреждение, это предупреждение потому что не настроен режим, то есть не настроен соответствующий режим
mode имеет два параметра: один — режим разработки, а другой — режим производства.
Можно настроить прямо в package.json
"dev": "webpack-dev-server --mode=development --open --hot"бежать дальше
npm run buildБудет упаковать и генерировать новую папку Dist
8. Введите код, совместимый с загрузчиком
npm i babel-loader babel-core babel-preset-env -Dbabel-preset-env помогает нам настроить babel. Нам нужно только сказать ему, с чем мы хотим быть совместимыми (целевая среда выполнения), и он автоматически преобразует код в код, совместимый с соответствующей средой.
Изменить файл webpack.config.js
module: {
rules: [
{
test: '/\.js$/',
include: path.resolve(__dirname + '/src'),
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: ['env']
}
]
}
]
}9. Скачайте vue и добавьте его в main.js
import Vue from 'vue';
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})Запуск проекта обнаружил ошибку
vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
Причина сообщения об этой ошибке заключается в том, что используется работающая версия vue, а скомпилированная версия не может быть использована.В настоящее время нам нужно настроить псевдоним позже, а скомпилированную версию использовать нельзя.resolve.aliasНастроен как следующий объект
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, '/src')
}
}Затем запустите проект и обнаружите, что приветствие было напечатано на странице.
Был создан простой проект vue на основе веб-пакета.
Далее некоторая конфигурация
10. Настройте css
Введите команду для загрузки style-loader css-loader
npm i style-loader css-loader -DНастройте правила в модуле
{
test: /\.css$/,
use:['style-loader','css-loader'],
include: path.resolve(__dirname + '/src/'),
exclude: /node_modules/
}Протестируйте внедрение css, создайте новый index.css и импортируйте его в main.js.
index.css
div{
color:skyblue;
} import './index.css';Вы можете видеть, что цвет текста изменился
11. Поддержка изображений
Введите команду для загрузки файла-загрузчика url-loader
npm i file-loader url-loader -DНастройте правила в модуле
{
test: /\.(jpg|png|gif|svg)$/,
use: 'url-loader',
include: path.resolve(__dirname + '/src/'),
exclude: /node_modules/
}Протестируйте введение картинок, создайте новую папку ресурсов, поместите картинку и импортируйте ее в main.js.
import img from'./assets/a.png'отображать в html
<img :src="img" alt="">12. Внедрение html-webpack-плагина
Введите команду для загрузки html-webpack-plugin
npm i html-webpack-plugin -Dустановить плагины
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
chunks: ['main']
})
]13. Для разработки Vue требуются файлы .vue, если представлены vue-laoader и vue-template-compiler.
Введите команду для загрузки vue-loader vue-style-loader vue-template-compiler
npm i vue-loader vue-style-loader vue-template-compiler -DНастроить vue-загрузчик
{
test: '/\.vue$/',
loader: 'vue-loader'
}Вам также необходимо ввести vue-loader/lib/plugin
var VueLoaderPlugin = require('vue-loader/lib/plugin');И мститель в плагине
new VueLoaderPlugin()Новое приложение.vue
<template> <h1>Hello World!</h1></template>
<script> export default { name: 'App' }</script>
<style></style>изменить main.js
import Vue from 'vue';import App from './App.vue';
new Vue({ el: '#app', render: h => h(App)});запустить проект
14. Включите горячее обновление js
Поскольку vue-style-loader инкапсулирует style-loader, горячее обновление работает из коробки, но горячее обновление js пока недоступно Мы будем обновлять браузер каждый раз, когда будем изменять код, поэтому нам нужно продолжить настройку.
const webpack = require('webpack');и настроить его в плагине
new webpack.HotModuleReplacementPlugin()Горячее обновление было автоматически включено
До сих пор работал проект vue, созданный webpack.
Далее идут некоторые оптимизации,
15. Настройте псевдонимы в разрешении
resolve: {
extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
"@": path.resolve(__dirname, 'src'),
"components": path.resolve(__dirname, '/src/components'),
"utils": path.resolve(__dirname + '/src/utils'),
},
modules: ['node_modules']
}16. Поддержите sass
Введите команду для загрузки sass-loader node-sass
npm i sass-loader node-sass -D
Измените css webpack.config.js
{
test: /\.sass$/,
use:['vue-style-loader',
'css-loader', 'sass-loader'
],
include: path.resolve(__dirname + '/src/'),
exclude: /node_modules/
},Базовая конфигурация почти такая же, и нужно добавить некоторые вещи, которые будут добавлены позже.
Эта статья является основой для вебпака для сборки проекта vue.Следующая статья будет дополнена и снова углублена.Спасибо, я надеюсь, что вы сможете высказать больше мнений и идти дальше и дальше по дороге фермеров кода.
Спасибо за накрутку адреса звездного проектаGitHub.com/Nobody-Mengbo/Я…