Home > Developer > Web Develop
Installing Webpack requires the node environment to be installed, so you need to install node in your PC. Node official website https://nodejs.org/, install the LTS version.
WEBPCK Basic Concepts
Do a simple little case below
1. Global Installation Webpack
Windows users directly Execute
Install webpack-g
Mac users need to add the sudo command before the command
sudo Install webpack-g
Then the MAC user enters the computer boot password and waits for the installation to complete
2. Create a new folder Webpackstudy, then navigate to this directory in the terminal and execute
$ NPM Init
Press ENTER all the time, and a Package.json file will be created when you finish executing
3, installation Webpack
Install Webpack--save-dev
Because it's a development environment, add--save-dev at the end.
4. Create the following file
Where 123.jpg is larger than 8k files, Text.png is less than 8k files
In Common.css for
Body { background-color: skyblue; font-size: 20px;}In index.html for
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title></Head><Body> </Body></HTML>
In Main.js for
// alert (' Hello World ')const COMMONCSS = require ('./common.css '= require ('./img/123.jpg '= Require ('./img/text.png '); Console.log (text); var New = ' dist/' +function() { document.body.appendChild (img)}5. Enter the following in the Webpack.config.js file:
//Handling path-relatedConst PATH = require (' path ');//Compression ModuleConst UGLIFYJS = require (' Uglifyjs-webpack-plugin '); Module.exports= { //Entry FileEntry: './src/main.js ', output:{//Path.resolve the path to the absolute path __dirname is the current JS directoryPath:path.resolve (__dirname, ' dist ')), FileName:' Bundle.js ' }, //Webpack4 needs to be developed for the development environmentMode: "Development", //Module Configuration loader and other informationmodule: {//rules configuration Loader informationrules:[{//judge if the file is at the end of the. CSS then use Css-loader to handle it. Instead of wrapping up all the CSS, we're collecting dependencies from the portal.test:/\.css$/, use:' Css-loader ' },{ //Packaging picture FilesTest:/\. (png|jpg|gif) $/, use:[{loader:' Url-loader ', //Configuration Itemsoptions:{//when the image is less than 8k, the image will be converted to Base64 format.limit:8192}}]} ]}, plugins:[//using the compression plug-in NewUglifyjs ()]}
6. Dependencies required for installation
Install file-loader uglifyjs-webpack-plugin--save-dev
Execute the webpack command after the installation is complete
$ webpack
Introduction of Bundle.js in index.html after packaging is complete
You can see an img file larger than 8k in the browser open index.html.
As for body why no side color, I also in groping ...
Webpack4 Simple Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
