Знакомство с вебпаком

внешний интерфейс Webpack

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

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

Установите веб-пакет в этот проект

Установите Webpack в этот проект, вы можете выбрать любую команду для запуска в соответствии с вашими потребностями.

#npm i -D — это сокращение от npm install --save-dev, которое относится к devDependencies, которые устанавливают модуль и сохраняют его в package.json.

#установить последнюю стабильную версию npm i -D webpack

Установите последнюю версию интерфейса npm i -D webpack@beta.

Установить веб-пакет глобально

npm i -g webpack

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

Просто и практично

  1. npm install webpack --save--dev (рекомендуется использоватьyarn add webpackустановить)
  2. npm init (создайте файл package.json, на этот раз используйтеyarn init)
  3. Настройте команды упаковки в файле package.json **"scripts": { "start": "веб-пакет --config webpack.config.js"

},** 4. Создайте каталог проекта следующим образом.

каталог проекта

  • index.html
  • main.js
  • show.js
  • webpack.config.js
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>Document</title>
</head>
<body>
    <div id="app">
         
    </div>
</body>
<script src="./dist/bundle.js"></script>
</html>
main.js
// 通过commonjs规范导入show函数
const show = require('./show.js');
show('Webpack');
show.js
// 操作DOM元素，将content显示到页面上
function show(content){
    window.document.getElementById('app').innerHTML('hello'+content)
}

module.exports = show;
webpack.config.js
const path = require('path');

module.exports = {
    // JavaScript执行入口文件
    entry: './main.js',
    output:{
        // 将所有依赖的模块合并输出到一个bundle.js文件
        filename: 'bundle.js',
        // 将输出文件都放到dist目录下
        path: path.resolve(__dirname, './dist'),
    }
}
Начать выполнение
npm run start

Наконец, в каталоге создается каталог dist, а в каталоге создается файл bundle.js.bundle.js — исполняемый файл javascript, который содержит два модуля main.js, show.js и встроенные модули, которые страница зависит от функции запуска webpackBootstrap. В это время откройте страницу index.html в браузере, и вы увидите Hello Webpack.

Суммировать

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

Автор этой статьи: Фэн Тэнфэй, Ziru Front-end R&D Center

Категории