Installation
This guide goes through the various methods used to install webpack.
Prerequisites
Before we begin, make sure you have a fresh version of Node.js installed. The current Long Term Support (LTS) release is an ideal starting point. You may run into a variety of issues with the older versions as they may be missing functionality webpack and/or its related packages require.
Local Installation
The latest webpack release is:
To install the latest release or a specific version, run one of the following commands:
npm install --save-dev webpack # or specific version npm install --save-dev webpack@version>tip
Whether to use —save-dev or not depends on your use cases. Say you’re using webpack only for bundling, then it’s suggested that you install it with —save-dev option since you’re not going to include webpack in your production build. Otherwise you can ignore —save-dev .
If you’re using webpack v4 or later and want to call webpack from the command line, you’ll also need to install the CLI.
npm install --save-dev webpack-cliInstalling locally is what we recommend for most projects. This makes it easier to upgrade projects individually when breaking changes are introduced. Typically webpack is run via one or more npm scripts which will look for a webpack installation in your local node_modules directory:
"scripts": "build": "webpack --config webpack.config.js" >tip
To run the local installation of webpack you can access its binary version as node_modules/.bin/webpack . Alternatively, if you are using npm v5.2.0 or greater, you can run npx webpack to do it.
Global Installation
The following NPM installation will make webpack available globally:
npm install --global webpackwarning
Note that this is not a recommended practice. Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version.
Bleeding Edge
If you are enthusiastic about using the latest that webpack has to offer, you can install beta versions or even directly from the webpack repository using the following commands:
npm install --save-dev webpack@next # or a specific tag/branch npm install --save-dev webpack/webpack#warning
Take caution when installing these bleeding edge releases! They may still contain bugs and therefore should not be used in production.
maxfarseer / install-and-setup-webpack-4-for-pfoject-28.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| // webpack v4 |
| const path = require ( ‘path’ ) ; |
| const ExtractTextPlugin = require ( ‘extract-text-webpack-plugin’ ) ; |
| const HtmlWebpackPlugin = require ( ‘html-webpack-plugin’ ) ; |
| module . exports = |
| entry : < main : './src/index.js' >, |
| output : |
| path : path . resolve ( __dirname , ‘dist’ ) , |
| filename : ‘[name].[chunkhash].js’ |
| > , |
| module : |
| rules : [ |
| test : / \. js $ / , |
| exclude : / node_modules / , |
| use : |
| loader : «babel-loader» |
| > |
| > , |
| test : / \. scss $ / , |
| use : ExtractTextPlugin . extract ( |
| fallback : ‘style-loader’ , |
| use : [ ‘css-loader’ , ‘sass-loader’ ] |
| > ) |
| > |
| ] |
| > , |
| plugins : [ |
| new ExtractTextPlugin ( |
| ) , |
| new HtmlWebpackPlugin ( |
| inject : false , |
| hash : true , |
| template : ‘./src/index.html’ , |
| filename : ‘index.html’ |
| > ) , |
| ] |
| > ; |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Урок 1. Webpack 4+. Настройка и установка Webpack
В данном уроке вы узнаете про то, что такое Webpack, в каких проектах он применяется. В результате урока вы установите Webpack и напишите минимально необходимую конфигурацию, которая позволит собирать проект в 2х режимах: оптимизированной сжатой версии и в режиме разработки.
Все уроки курса:
Комментарии (5)
Количество уроков: 12
Продолжительность курса: 01:44:51
Автор: Владилен Минин
Меня зовут Владилен Минин. Я являюсь Seniour Front End разработчиком. Моя основная деятельность – это создание функционала на JavaScript, приложения любой сложности. Также занимаюсь обучением людей с различным уровнем навыков: от полных новичков до профессионалов в своей области.
Описание курса: В данном курсе вы познакомитесь с последней версией технологии WebPack. В данном курсе вы создадите приложение, в котором будут показана реализация всех базовых и часто используемых задач при современной веб разработке.
Все права защищены © 2024
Бернацкий Анрей Васильевич
Служба поддержки
maxfarseer / install-and-setup-webpack-4-for-pfoject-36.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| // webpack v4 |
| const path = require ( ‘path’ ) ; |
| // const ExtractTextPlugin = require(‘extract-text-webpack-plugin’); |
| const HtmlWebpackPlugin = require ( ‘html-webpack-plugin’ ) ; |
| const WebpackMd5Hash = require ( ‘webpack-md5-hash’ ) ; |
| const MiniCssExtractPlugin = require ( «mini-css-extract-plugin» ) ; |
| module . exports = |
| entry : < main : './src/index.js' >, |
| output : |
| path : path . resolve ( __dirname , ‘dist’ ) , |
| filename : ‘[name].[chunkhash].js’ |
| > , |
| module : |
| rules : [ |
| test : / \. js $ / , |
| exclude : / node_modules / , |
| use : |
| loader : «babel-loader» |
| > |
| > , |
| test : / \. scss $ / , |
| use : [ ‘style-loader’ , MiniCssExtractPlugin . loader , ‘css-loader’ , ‘postcss-loader’ , ‘sass-loader’ ] |
| > |
| ] |
| > , |
| plugins : [ |
| new CleanWebpackPlugin ( ‘dist’ , < >) , |
| // new ExtractTextPlugin( |
| // |
| // ), |
| new MiniCssExtractPlugin ( |
| filename : ‘style.[contenthash].css’ , |
| > ) , |
| new HtmlWebpackPlugin ( |
| inject : false , |
| hash : true , |
| template : ‘./src/index.html’ , |
| filename : ‘index.html’ |
| > ) , |
| new WebpackMd5Hash ( ) |
| ] |
| > ; |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment