Подробное объяснение создания строительных лесов vue в webpack4.0

Webpack

Готов к работе

предисловие

По какой-то причине, чтобы завершить демонстрацию, подумав об этом, я решил построить простой проект строительных лесов veu spa. У меня есть понимание основных концепций вебпака (вход, вывод, загрузчик, плагин, режим...), но друзья, которые не пробовали скаффолдинг, могут продолжить чтение.

Готов к работе

Конечно, вам нужна среда узла

Давайте начнем

mkdir IM-chat-vue // Создать папку с файлом проекта, имя, которое я дал здесь для демонстрации, — IM-chat-vue

mkdir build //

mkdir src //

npm init // создаем package.json и инициализируем его

Установите необходимые зависимости

NPM установить --save-dev vue // На основании Vue, то Vue важно ... Не много введение

npm установить --save-dev веб-пакет // Основанный на веб-пакете, веб-пакет также необходим... не так много введения

npm установить --save-dev webpack-cli //webpack версии 4+ необходимо загрузить webpack-cli (ниже могут быть задействованы некоторые инструкции)

npm install --save-dev путь // Модуль path предоставляет некоторые служебные функции для обработки путей к файлам и каталогам.

npm установить --save-dev html-webpack-plugin //Упрощает создание HTML-файлов Плагин, упрощающий создание HTML-файлов для обслуживания ваших пакетов

npm install --save-dev чистый-webpack-плагин //Используется для очистки содержимого в папке сборки при сборке Плагин веб-пакета для удаления/очистки папок сборки перед сборкой

npm install --save-dev vue-loader //Загрузчик компонентов Vue.js(плагин)

npm установить --save-dev vue-template-compiler //Для компиляции функции шаблона используйте с vue-loader

npm установить --save-dev webpack-dev-сервер //Горячее обновление требует сборки сервисного модуля

NPM Установка --save-dev Style-loader CSS-погрузчик // Процессор стиля CSS

src/app.vue

<template lang="html">
    <div class='test'>
        <p class="test">IM-chat-vue  IM-chat-vue  </p>
        {{test}}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                test:"简单构建vue脚手架项目"
            }
        }
    }
</script>

<style>
    .test{
        color:red;
    }
</style>

src/main.js

import Vue from 'vue'
import App from './app.vue'

new Vue({
    el:'#app',
    render: h => h(App)
})

index.html

<!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>webpack app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

Включите Vue в проект здесь — теперь мы начинаем настраивать веб-пакет для компиляции и упаковки этого проекта Vue.

Создайте webpack.config.js и код в только что созданной папке сборки.

const path = require('path');    //path 模块提供了一些工具函数，用于处理文件与目录的路径。
const HtmlWebpackPlugin = require('html-webpack-plugin');   //构建html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  // 清理构建目录下的文件
const webpack = require('webpack');       //webpack打包工具
const VueLoaderPlugin = require('vue-loader/lib/plugin');         // vue-loader 编译vue文件
module.exports = {
    mode: "development",
    entry: {       //入口
        "app": path.resolve(__dirname, "./../src/main.js")
    },
    module:{            //处理项目中的不同类型的模块。
        rules:[      // rules 各种规则(数组类型) 每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)
            {
                test:/\.css/,
                use: ['style-loader', 'css-loader']   // style-loader 和css-loader 编译css处理
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 编译vue模块
            }
        ]
    },
    devtool: 'inline-source-map',   //生曾map 映射对应代码  方便错误查询
    devServer:{
        contentBase: './dist',    // 告诉服务从哪提供代码内容(静态文件这么使用)
        hot:true    //hot模式开启
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({            // 构建html
            filename:'index.html',      //文件名
            title:'im-chat-vue',            //title
            template:'./index.html',       //参照模板样式
        }),
        new webpack.HotModuleReplacementPlugin(),  //热模块替换开启
        new VueLoaderPlugin()                 //vue-loader插件开启
    ],
    output: {        //出口
        filename: 'index.js',    //文件名
        path: path.resolve(__dirname, '../dist'),   //路径
        publicPath:""        //srcript 引入路径
    },
    resolve:{
        //引入路径是不用写对应的后缀名
        extensions: ['.js', '.vue', '.json'],
        alias:{
            //正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本
            'vue$':'vue/dist/vue.esm.js',
            //用@直接指引到src目录下
            '@': path.resolve(__dirname,'./src'),
        }
    },

};

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

{
  "name": "im-chat-vue",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config=build/webpack.config.js"
  },
  "author": "ruindong",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "style-loader": "^1.0.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

Затем выполните npm run build для успешной компиляции. В то же время создается файл dist, как показано на рисунке ниже.

Откройте файл index.html в браузере, как показано на рисунке.

到此一个简单的编译打包vue项目的脚手架就完成了。 Но этого недостаточно.开发中我们还需要很多辅助，比如热更新。

Поскольку код горячего обновления был настроен в файле webpack.config.js выше. Так что просто нужно изменить package.json, чтобы добавить команду сценария для запуска горячего обновления.

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

Затем выполните npm run dev, и горячее обновление будет успешно скомпилировано. Измененная кодовая страница может обновляться синхронно

На данный момент простые леса были завершены. Это проще, чем ожидалось

Теперь запустите скаффолдинг для обработки предварительно скомпилированного css. и css разделение

Лично мне нравится использовать меньше, поэтому я ввожу здесь только обработку загрузчика less.

npm install --save-dev less

npm install --save-dev less-loader; npm install extract-text-webpack-plugin --save-dev

//Установить less и нужный less-loader (понимайте его как компилятор, который компилирует less в css, он незаменим);

module:{            //处理项目中的不同类型的模块。
        rules:[      // rules 各种规则(数组类型) 每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)
            {
                test:/\.css/,
                use: ['style-loader', 'css-loader']   // style-loader 和css-loader 编译css处理
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 编译vue模块
            },
            {
                test:/\.less/,
                use: ['style-loader', 'css-loader', 'less-loader'] // 编译 Less to CSS
            }
        ]
    },

npm install --save-dev extract-text-webpack-plugin // отключение css webpack4 устарело

NPM установить --save-dev minicssextractplugin // Используйте это для извлечения CSS

Для автоматической обработки префиксов свойств CSS3 сначала необходимо установить два пакета postcss-loader и autoprefixer (плагины, автоматически добавляющие префиксы) сначала добавить postcss.config.js в корневой каталог

// postcss.config.js
module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        },
        // 'postcss-pxtorem': {
        //     rootValue: 37.5,
        //     propList: ['*']
        // } //有需要再用
    }
}

// build/webpack.config.js
const path = require('path');    //path 模块提供了一些工具函数，用于处理文件与目录的路径。
const HtmlWebpackPlugin = require('html-webpack-plugin');   //构建html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  // 清理构建目录下的文件
const webpack = require('webpack');       //webpack打包工具
const VueLoaderPlugin = require('vue-loader/lib/plugin');         // vue-loader 编译vue文件
//const ExtractTextPlugin = require("extract-text-webpack-plugin"); //css分离 webpack4已经不支持
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //css分离

module.exports = {
    mode: "development",
    entry: {       //入口
        "app": path.resolve(__dirname, "../src/main.js")
    },
    module:{            //处理项目中的不同类型的模块。
        rules:[      // rules 各种规则(数组类型) 每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)
            {
                test: /\.(sa|sc|le|c)ss$/,
                use: [
                    'style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: true,
                        },
                    },
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: { path: path.resolve(__dirname, '../postcss.config.js') }
                        },
                    }
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'         //vue-loader 编译vue模块
            }
        ]
    },
    devtool: 'inline-source-map',   //生曾map 映射对应代码  方便错误查询
    devServer:{
        contentBase: path.resolve(__dirname, '../dist'),    // 告诉服务从哪提供代码内容(静态文件这么使用)
        hot:true    //hot模式开启
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({            // 构建html
            filename:'index.html',      //文件名
            title:'im-chat-vue',            //title
            template:'index.html',       //参照模板样式
        }),
        new webpack.HotModuleReplacementPlugin(),  //热模块替换开启
        new VueLoaderPlugin(),                 //vue-loader插件开启
        //new ExtractTextPlugin("index.css") //配置分离出来的css文件地址webpack4已经用不了了
        new MiniCssExtractPlugin({
            // 类似 webpackOptions.output里面的配置 可以忽略
            filename: 'css/[name].css',
            //chunkFilename: 'css/[id].css',
        })
    ],
    output: {        //出口
        filename: 'index.js',    //文件名
        path: path.resolve(__dirname, '../dist'),   //路径
        publicPath:""        //srcript 引入路径
    },
    resolve:{
        //引入路径是不用写对应的后缀名
        extensions: ['.js', '.vue', '.json'],
        alias:{
            //正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本
            'vue$':'vue/dist/vue.esm.js',
            //用@直接指引到src目录下
            '@': path.resolve(__dirname,'../src'),
        }
    },

};

Операционная страница css вышеперечисленных шагов показана на рисунке.

Результат после компиляции показан на рисунке

Страница css была извлечена и поддерживает меньше. Существует также префикс браузера с автоинкрементом

Пути образа процесса

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

установить вавилон

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

Примечание здесь установлена ​​Babel-Loader версия 7.1.5. 8.0.0.06 Версия установлена ​​по умолчанию, не совместима WP4

Следующим шагом является настройка среды формирования шаблонов. Я видел такого друга. продолжаю обновлять. 9:30 утра по текущему времени 5 ноября 2019 года. Обновите среду конфигурации и eslint, vue-router и контроллер состояния позже.

Категории