Основная webpack3,4 использования

Основное использование WebPack

---

WebPack установка

1. Нужна помощь среды узла использования WebPack
2. NPM автоматически загружается этот инструмент управления пакетами в узле, после чего операция нам нужно использовать НПМ инструменты управления пакетами связанных с ними операций
3. Нам нужно открыть терминал (CMD) или терминал компилятора (я использую против кода компилятора, используя ctrl + shift + ~открытый терминал)
4. Ввод npm install webpack -gв глобальную загрузке WebPack, -g представляет собой глобальный установлен.
5. После загрузки хороших входного терминала , webpack -versionчтобы увидеть версию Webpack, если информация о версии появится, установка прошла успешно
   Примечание: будет незначительные различия WebPack версии в последующих операциях, я нахожусь здесь , чтобы загрузить версию wepack4.x, следующий разговор, я webpack3.x версии 4.x версии и немного поговорить о различиях

6. Если WebPack версии 4.x, в дополнение к глобальной установленной WebPack также должны смотреть на это глобальное установить некоторые дополнительные вопросы WebPack-кли быть установлен выше четвертой ступени аналогично шагам

   Основная WebPack использования

7. Я полагаю, что каталог выглядит следующим образом: наличие впускного и JS файл папка main.js ЦСИ папка, есть папка JS aaa.js файл, каждый файл кода выглядит следующим образом

• aaa.js

    function add(num1 , num2) {
      return num1 + num2;
    }

    function mul(num1 , num2) {
      return num1 * num2;
    }
    export {add,mul};   // ES6导出模块

• main.js

    import {add,mul} from './js/aaa.js' // ES6的语法导入模块
    console.log(add(20,30));
    console.log(mul(20,30));

1. После вышеупомянутой ученой зависимости, мы должны упаковать файлы. Примечание: Для пакета WebPack доступа должна быть эффективной на сервере, или браузер будет жаловаться
2. Зависимости сразу после кода подтверждения, входной терминал
   • webpack3.x версия:webpack .\src\main.js .\dist\bundle.js
   • версия webpack4.x: webpack .\src\main.js -o .\dist\bundle.js --mode=development
     Приведенный выше код означает: по WebPack в .\src\main.jsфайлах пакет main.js в этом каталоге на расстоянии папки с именем bundle.js
3. Если в будущем после того, как код будет изменен, он должен быть повторно упакованы снова, а именно: Третий этап выполняется еще раз
4. На этот раз, возможно, думаю, что эта операция очень сложная, и, таким образом, мы будем в дальнейшем улучшить код
5. Выполнение операций терминала: npm init -yинициализировать JSon файл , который необходим, после загрузки пакета , который будет записан в
   Примечании: Если вы используете имя из выше инициализирует файл JSON, package.json значения имени проекта, мы не можем значение атрибута имени устанавливаются здесь для китайцев, рекомендуются использовать НУЮ инициализацию путь файл инициализация package.json, так что выгоды можно настроить значение имени свойства, это не китайское
6. Входной разъем: npm install path --save-devдля модуля загрузки пути в среде разработки (для облегчения последующего использования)
7. Webpack.config.js создать новый файл, примечание: Имя этого файла фиксирована, не изменить себя , введите код в файле:

    const path = require('path');   // 导入之前的下载好的模块
    module.exports = {
        // 在配置文件中，手动指定 入口 文件和 出口 文件
        mode:'development',   //  webpack4.x版本中需要加入这个属性
        entry:'./src/main.js',  //  入口文件
        output:{  //  出口文件
            path:path.resolve(__dirname,'dist'),  //  指定将要打包好的文件应该要输出到哪个地方去（注意：路径必须是绝对地址）
            filename: 'bundle.js' //  指定输出文件的文件名
        }
    }

Примечание: Если выход пути вы входите в ./dist то будет жаловаться, потому что путь здесь не разрешается использовать относительный адрес, вы должны использовать абсолютный адрес, вам нужно использовать узел в модуле пути

1. После завершения вышеуказанной операции, вход в терминал: webpackзапакованном
2. Открыть файл package.json, найти в файле scriptsатрибутов, которые представляют эти команды сценария, мы добавляем пользовательскую команду в объекте, таких как: собственность под названием: строительство, стоимость недвижимости WebPack.
3. Тогда можно ввести в терминале: npm run buildУпакованный файл
   Примечание: WebPack используется в терминале используется во всем мире в WebPack и WebPack используется в объекте сценариев предпочитают использовать местные. Как правило , мы используем местную Webpack, поэтому мы хотим использовать загрузить НПЙ местный Webpack. Если версия 4.x WebPACK также необходимо загрузить WebPack-кли, код выглядит следующим образом :
   npm install webpack --save-dev , где является копи-DEV-зависимого развития, а именно: WebPACK требуется в разработке, а затем проект не требует использования линии. Он покажет вам развить зависимость загруженных файлов devDependencies package.json файлов в.