Webpack создает проект vue

Vue.js Webpack

Предварительная подготовка

  1. webpack
  2. vue.js
  3. npm
  4. nodejs
  5. Синтаксис ES6

Поскольку содержание этой статьи заключается в загрузке vue через npm, вам необходимо установить среду nodejs перед запуском, а затем выполнить следующие шаги после завершения установки:

Создать проект

    mkdir  vue-demo
    cd vue-demo

Используйте команду npm init для создания файла package.json.

npm init

Вероятно, сгенерированный package.json выглядит следующим образом:

{
  "name": "vue-demo",
  "version": "1.0.0",
  "description": "this is a vue demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC",
  "dependencies": {
  }
}

Представьте веб-пакет, пожалуйста, обратитесь к тому, как использовать веб-пакетОфициальный сайт 

    npm install webpack --save-dev

Если скорость загрузки с использованием npm слишком низкая, вы можете использовать зеркало Taobao cnpm.

    npm install -g cnpm –registry=https://registry.npm.taobao.org

Введите приведенную выше команду, чтобы указать npm на домашнее зеркало, при ее использовании вам нужно заменить npm на cnpm, а остальные остаются без изменений.

Создайте в проекте файл webpack.config.js.

const path = require('path')
module.exports ={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"demo.js"
    }
}

Скомпилировать с помощью команды webpack

webpack

Скомпилированный каталог проекта выглядит так:

Примечание. Перед использованием команды webpack необходимо создать файлы index.html и main.js, где файл main.js находится в каталоге src.

Содержимое index.html выглядит следующим образом.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
</head>
<body>
    <script src="./dist/demo.js"></script>
</body>
</html>

Содержимое main.js выглядит следующим образом

alert('hello world');

Представьте вью

    npm install vue --save

После выполнения команды в package.json будет добавлен следующий код

"dependencies": { "vue": "^2.4.2" }

Измените содержимое main.js на следующий код.

import Vue from 'vue'
var vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue'
    }
})

Представьте вавилон

npm install --save-dev babel-core babel-loader

Поскольку при использовании vue используется много синтаксиса es6, но многие браузеры не очень хорошо поддерживают es6, поэтому при компиляции эти синтаксисы необходимо преобразовать в синтаксис es5.В настоящее время для компиляции мы используем babel.

Чтобы узнать, как использовать babel, ознакомьтесь с документом на официальном веб-сайте http://babeljs.cn/.

Добавьте babel в файл конфигурации webpack.config.js:

const path = require('path')

module.exports ={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"demo.js"
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                loader:"babel-loader",
                exclude: /node_modules/
            }
        ]
    }
}

Затем введите команду webpack в командной строке для компиляции, а после завершения компиляции откройте файл index.html в браузере, и вы увидите следующую ошибку в консоли браузера:

[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>)

Это связано с тем, что используется runtime-версия vue, а компилятор в этой версии недоступен, нам нужно переключить его на runtime + скомпилированную версию, и нам нужно добавить следующий код в файл конфигурации.

 resolve: {
    alias: {
       'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
 }

На этом этапе запустите команду webpack для перекомпиляции и доступа к странице index.html после компиляции.Содержимое страницы выглядит следующим образом.

На этом этапе создается проект vue на основе веб-пакета.

Некоторые распространенные конфигурации webpack

В фактической разработке проекта мы также представим файлы ресурсов, такие как css, изображения и шрифты. Внедрение этих файлов требует загрузки в проект соответствующего загрузчика и его нормального использования.

Далее только рассказывается, как использовать некоторые из необходимых нам загрузчиков. Для получения дополнительной информации см.документация по загрузчику webpack.

css-загрузчик

Нам нужно внедрить css-loader и style-loader (цель установки style-loader — встраивание css в html в стиле).

Выполнение заказа

    npm install --save-dev css-loader style-loader

Настройте следующее в webpack.config.js

    module: {
        rules: [{
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }]
    },

Затем создайте новую папку стилей в каталоге src и добавьте в нее файл main.css, напишите следующее содержимое

#app{
    color:red;
}

Затем запустите команду webpack и перезагрузите файл index.html, видно, что css вступил в силу, и эффект выглядит следующим образом.

Загрузка ресурсов изображения

Используйте загрузчик файлов или загрузчик URL для загрузки. Оба они используются для упаковки файлов и ресурсов изображений. Разница между ними заключается в том, что загрузчик URL инкапсулируется один раз на основе загрузчика файлов.

Если при посещении веб-сайта будет много картинок, будет отправлено много http-запросов, что снизит производительность страницы. Эту проблему можно решить с помощью url-loader. Загрузчик URL-адресов закодирует импортированное изображение и сгенерирует dataURl. Это эквивалентно преобразованию данных изображения в строку символов, а затем упаковке строки символов в файл.Наконец, вам нужно только импортировать этот файл, чтобы получить доступ к изображению.

Конечно, если изображение больше, кодирование будет потреблять производительность. Поэтому url-loader предоставляет параметр limit.Файлы меньше лимита байтов будут преобразованы в DataURl, а файлы больше лимита будут скопированы с помощью file-loader.

Здесь мы используем url-loader, поскольку он основан на инкапсуляции file-loader, также необходимо ввести file-loader.

npm install --save-dev file-loader url-loader

Добавьте следующую конфигурацию в правила webpack.config.js

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000
    }
}

Следующим шагом будет внедрение изображения в код, который необходимо модифицировать следующим образом в main.js и index.html:

main.js

import Vue from 'vue'
import './styles/main.css'
import logo from'./images/logo.png'

var vm = new Vue({
    el:'#app',
    data:{
        logo:logo,
        msg:'hello vue'
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
</head>
<body>
    <div id="app">
        <img :src="logo" alt="logo" class="logo">
        {{msg}}
    </div>
    <script src="./dist/demo.js"></script>
</body>
</html>

Наконец, запустите команду webpack и посетите index.html, результат будет следующим:

В тесте было обнаружено, что когда образ был больше 10 КБ, он не смог загрузить образ, и образ не мог быть найден, но в это время в каталоге dist вы можете увидеть образ, который был успешно загружается через загрузчик, а затем средствами разработчика браузера просматривается изображение.При проверке эталонного пути изображения можно обнаружить, что путь img в странице неверный, и только имя файла в пути отсутствует предыдущий каталог dist, поэтому на данный момент нам нужно изменить код в main.js следующим образом

logo:"./dist/"+logo,

После перекомпиляции выводится картинка. Но теперь снова вылезает новая проблема, так как мы настроили код размером меньше 10кб в конфигурационном файле, он будет встроен в код в виде base64. Таким образом, префикс «./dist» в настоящее время не нужен. Есть два способа решить эту проблему:

  • Встраивание изображений в код без использования base64
  • Поместите файл html в каталог dist Поскольку используется загрузчик url-loader, первый использовать не рекомендуется. Поэтому используем второй способ.

Самый простой способ поместить html-файл в каталог dist — скопировать файл index.html в каталог dist, а затем изменить импортированный код на:

    <script src="./demo.js" > </script>

Вернитесь к исходным настройкам в main.js

logo:logo,

После перекомпиляции образ может быть загружен в обоих случаях.

Другим распространенным способом является автоматическое создание html-файла в каталоге dist во время компиляции и копирование в него содержимого index.html. На данный момент нам нужен плагин HtmlWebpackPlugin для webpack.

Плагин HtmlWebpackPlugin

Внедрить плагины

    npm install --save-dev html-webpack-plugin

Добавьте следующую конфигурацию в webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
...

plugins:[
     new HtmlWebpackPlugin()
]

После перекомпиляции обнаружилось, что в каталоге dist сгенерирован html файл следующего содержания

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="demo.js"></script></body>
</html>

По сравнению с нашим исходным файлом index.html, в этом файле отсутствует следующее содержимое.

    <div id="app">
        <img :src="logo" alt="logo" class="logo">
        {{msg}}
    </div>

Теперь вам нужно внести небольшие изменения в файл конфигурации, чтобы html-файл автоматически копировал содержимое index.html при его создании. Изучив документацию плагина, можно увидеть, что необходимо внести следующие изменения:

plugins:[
     new HtmlWebpackPlugin({
          title: 'vue demo',
          template: 'index.html'         
     })
]

Убираем код скрипта из файла index.html, и после перекомпиляции мы можем получить нужный нам html файл

Для получения подробной информации о настройке параметров см.официальная документация

webpack-dev-server

В нашей реальной разработке нам нужно развернуть код на сервере, а не открывать файл непосредственно в браузере. На этом этапе нам нужно использовать webpack-dev-server из пакета webpack.

webpack-dev-server предоставляет нам простой веб-сервер с перезагрузкой в ​​реальном времени.

    npm install --save-dev webpack-dev-server

В файле webpack.config.js вам нужно указать папку, чтобы сообщить серверу разработки, откуда загружать файлы

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "demo.js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'vue demo',
            template: 'index.html'
        })
    ],
    devServer:{
        contentBase:"./dist"
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
        }
    }
}

Информация о конфигурации, выделенная красным шрифтом выше, предназначена для информирования webpack-dev-server о создании службы на локальном хосте: 8080 и использовании файлов в каталоге dist в качестве доступных файлов.

Давайте добавим скрипт в package.json для прямого запуска сервера разработки (сервера разработки):

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open",
    "build": "webpack"
  },

Затем введите следующую команду

    npm run dev

После завершения запуска браузер автоматически откроет страницу для посещения http://localhost:8080/.

На данный момент служба успешно запущена.

загрузка шрифта

Шрифт загружается так же как и изображение, так же используется url-loader Конфигурация следующая

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000
    }
 }

vue-loader

В процессе разработки Vue нам обычно нужно писать файлы, оканчивающиеся на .vue, то есть компоненты, такие как app.vue

<template>
    <div id="app">
        <img src="./images/logo2.jpg" alt="logo" >
        {{msg}}
    </div>
</template>
<script>
    export default {
        name:'app',
        data(){
            return {
                msg:"hello vue !!"
            }
        }
    }
</script>

Этот файл нужно загрузить через vue-loader, и теперь нам нужно выполнить следующую настройку. Загрузите и скомпилируйте файлы .vue с помощью vue-loader и vue-template-compiler.

npm install --save-dev vue-loader vue-template-compiler

в webpack.config.js

{
    test: /\.vue$/,
    loader: 'vue-loader'
 }

Чтобы ввести использование .vue в vue, нам нужно внести следующие изменения.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

main.js

import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

app.vue

<template>
    <div id="app">
        <img src="./images/logo.png" alt="logo" >
        {{msg}}
    </div>
</template>
<script>
    export default {
        name:'app',
        data(){
            return {
                msg: 'hello vue !!'
            }
        }
    }
</script>

После завершения модификации запустите команду npm run dev, чтобы получить страницу со следующим эффектом

горячее развертывание

На предыдущем шаге, если мы изменим параметры msg в файле app.vue, мы увидим, что страница автоматически обновится. Но в это время страница обновляется глобально.Если мы хотим обновить только локально, то есть обновить только измененную часть, нам нужно использовать плагин HotModuleReplacementPlugin для webpack и добавить следующую информацию в плагины webpack.config .js:

new webpack.HotModuleReplacementPlugin()

Затем перейдите в package.json, добавьте --hot -only к значению dev в скрипте

    "dev": "webpack-dev-server  --hot-only --open",

Затем перезапустите службу, а затем измените значение msg, вы обнаружите, что изменение значения в это время частично обновляется.

Производственная среда

Если мы найдем следующую подсказку в консоли браузера

Это означает, что проект в данный момент выполняется в среде разработки, и при развертывании в рабочей среде убедитесь, что он находится в рабочем режиме. Когда вам нужно упаковать и развернуть код в производственной среде, вам необходимо настроить следующее:

var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: '"production"'
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]}
Категории