Элегантно настройте проект vue, webpack 4.x + Vue имитирует конфигурацию vue-cli (1)

JavaScript Vue.js Webpack Babel
Элегантно настройте проект vue, webpack 4.x + Vue имитирует конфигурацию vue-cli (1)

Эта конфигурация является простой конфигурацией для вебпака 4.x своими руками, которую могут обойти мастера и изучить вместе новички! Если вы не понимаете, вы можете Baidu или оставить сообщение

webpack китайский официальный сайт

Яма: глобальная версия веб-пакета — 3.x, а проект — 4.x.

Рекомендуется установить локальную веб-версию проекта.

npm i -D webpack webpack-cli

Инициализировать package.json

npm init -y или npm init

Создайте файл package.json

{
  "name": "demo_03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Первый шаг — установить поле компиляции package.json.

Вообще говоря, существует два вида npm run dev и npm run build.

webpack добавляет две точки удобства--modeа также--env.NODE_ENV

  • режим двумя способами
    • --mode development режим разработки, скомпилированный js не сжат
    • --mode производственный производственный режим, скомпилированный js сжатый
  • --env.NODE_DEV установить режим среды
    • --env.NODE_ENV=development установить среду в режим разработки
    • --env.NODE_ENV=production установить среду в производственный режим
webpack     // 不设置mode的情况下 打包出来的文件自动压缩
webpack --mode development  // 设置mode为开发模式，打包后的文件不被压缩
webpack --mode production // 设置mode为生成环境，打包后的文件压缩
webpack --env.NODE_ENV=development 设置process.env.NODE_ENV为开发环境
webpack --env.NODE_ENV=production 设置process.env.NODE_ENV为生产环境

в пакете.jsonscript

"scripts": {
    "dev": "webpack --mode development --env.NODE_ENV=development",
    "build": "webpack --mode production --env.NODE_ENV=PRODUCTION"
  },

Как получить его в webpack.config.js?

const path = require('path');
module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'production' 根据此处判断环境
  console.log('Production: ', env.production) // ture

  return {
    entry: './src/index.js',
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'dist')
    }
  }
}

О настройке среды NODE_ENV также можно узнать из следующих веб-статей.Скрипт webpack4.0 npm использует --mode development для установки режима разработки и режима производства

Второй шаг — просто запустить и скомпилировать файл проекта vue.

Обязательно установите пакет vue npm, связанный с vue.vue vue-loader

Примечание. Консоль напомнит вам об установкеcss-loaderа такжеvue-template-compilerНе скупитесь, установите вместе

npm i -D vue vue-loader

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

код показывает, как показано ниже

const configFun = (env)=> {
    return {
        entry: path.join(__dirname, 'src/main.js'), 
        output: {
        	filename: 'index.js', 
        	path: path.resolve(__dirname, 'dist')
    	}
        module: {
            rules:[{
                test: /\.vue$/,
                loader:'vue-loader'
            }]
        }
    },
}
module.exports = (env)=> {
    let config = configFun(env)
    return config;
}

новое в файле проектаsrcфайл, вsrcновый в файлеapp.jsа такжеmain.jsкод показывает, как показано ниже:

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


let root = document.createElement('div');
document.body.appendChild(root);


new Vue({
	render: (h)=> h(App)
}).$mount(root)

// app.vue
<template>
    <div class="test">{{text}}</div>
</template>
<script>
    export default {
        data(){
            return {
                text:'hello webpack111!！！'
            }
        }
    }
</script>
<style>
    .text{
        color: #999;
    }
</style>

Третий шаг — добавить компиляцию других модулей

ES6ization js, css и изображения

npm i -D babel-core babel-loader babel-preset-es2015 style-loader url-loader file-loader

  • Вопрос 1. Если вы не понимаете разницу и связь между babel-core babel-loader babel-preset-es2015, вы можете нажать, чтобы просмотреть статью Бога

Различия и связи между babel-loader, babel-core и babel-preset-env

  • Вопрос 2, связь между url-загрузчиком файла-загрузчиком

url-loader преобразует изображения, которые не установлены или меньше установленного лимита, и используются src для img в формате base64, а также использует file-loader для анализа изображений, размер которых превышает лимит байтов.

Настройте модуль в webpack.config.js, код выглядит следующим образом

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: /\.vue$/,
            loader:'vue-loader'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(gif|jpg|jpeg|svg)/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        name: '[name].[hash:6].[ext]'
                    }
                },
            ]
        }
    ]
},

Создайте новый файл .babelrc в файле проекта, код выглядит следующим образом

{
  "presets": ["es2015"] 
}

es2015 в соответствии с загруженным вами npmbabel-preset-es2015пакет отличается; если онbabel-preset-env,То есть"presets": ["env"]

Четвертый шаг — сгенерировать html-модуль.

До сих пор в проекте нет html-файлов.Как самый простой интерфейсный проект, webpack предоставляет намhtml-webpack-pluginпакет, вы можете использовать этот пакет для создания html-файлов

npm i -D html-webpack-plugin

В файле webpack.config.js следующим образом

const htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new htmlWebpackPlugin()
]

свойства конфигурации html-webpack-plugin

  • title генерирует заголовок html файла
  • имя файла — это имя файла html, по умолчанию — index.html.
  • шаблон по шаблону html ejs ejs
  • inject inject имеет четыре значения: true body head false
    • true значение по умолчанию, тэг script расположен в нижней части тела html-файла
    • Тег body script находится в нижней части тела html-файла.
    • Тег скрипта head находится в заголовке html-файла.
    • false не вставляет сгенерированный файл js, который практически не используется
  • favicon генерирует значок для вашего сгенерированного html-файла, значением является путь
  • minify использует minify для сжатия сгенерированных html-файлов. Значение по умолчанию — ложь
  • cache по умолчанию имеет значение true, что означает, что при изменении содержимого создается новый файл.
  • showErrors Когда веб-пакет сообщает об ошибке, он заключает сообщение об ошибке в префикс, значение по умолчанию — true.
  • чанки чанки в основном используются для файлов с несколькими записями [имя]
  • excludeChunks исключает некоторые js
  • xhtml Логическое значение, значение по умолчанию — false , если true , ссылка на файл выполняется в режиме, совместимом с xhtml.
  • Порядок скрипта chunksSortMode, четыре варианта по умолчанию: нет автозависимости {функция}

не делай здесьhtml-webpack-pluginСлишком много объяснений, порекомендуйте одноПросмотр статьи

Шаг 5: webpack-dev-сервер

WebPack-Dev-Server используется разработчиками для настройки и использования в разработке

На официальном сайте webpack есть подробная инструкция.Сервер разработки (devServer)

В соответствии с приведенным выше кодом webpack.config.js добавьте следующий код

const devConfigFun = (argument)=> {
    argument.devtool = '#cheap-module-eval-source-map';
    argument.devServer = {
        port: '8000',
        host: '0.0.0.0',
        overlay: {
            errors: true
        },
        open: true,
        hot: true
    }
    argument.plugins.push(
    	new webpack.HotModuleReplacementPlugin(),
    	new webpack.NoEmitOnErrorsPlugin()
    )
    return argument;
}

module.exports = (env)=> {
    let config = configFun(env)
    if (env.NODE_ENV === 'development') {
        config = devConfigFun(config)
    }
    return config
};

NODE_ENV установлен, чтобы сделать другие файлы доступными

Добавить к исходному коду

Можно получить любой файл js или файл vue

// src/main.js
console.log(process.env.NODE_ENV) // development

// src/app.vue
mounted() {
    console.log(process.env.NODE_ENV) // development
}

const configFun = (env)=> {
    return {
        plugins: [
            
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: env.NODE_ENV === 'development' ? '"development"' : '"production"' // 这里是双冒号
                }
            }),
        ]
    }
}

Измените скрипт package.json

  "scripts": {
    "dev": "webpack-dev-server --mode development --env.NODE_ENV=development",
    "build": "webpack --mode production --env.NODE_ENV=PRODUCTION"
  },

приставкаnpm run devАвтоматически открывать браузер по умолчанию, порт по умолчанию 8000

приставкаnpm run buildСкомпилировано в дистрибутивном файле src (включая index.htm и index.js)

Самая базовая конфигурация webpack 4.x + Vue гарантированно сможет запускаться и компилироваться.Ей еще далеко до режима webpack vue-cli, но она постоянно учится и совершенствуется, и будет продолжать обновляться. . Следите за обновлениями

Конфигурационный документ посылки + vue также будет обновлен в будущем.официальный сайт посылки

Код этого проекта находится вДемонстрация GitHub_01

Категории