Home > Article > Web Front-end > Introduction to the method of establishing demo and configuring webpack environment
Introduction to the method of establishing demo and configuring webpack environment
- 不言Original
- 2018-08-18 15:15:332551browse
This article brings you an introduction to the method of setting up a demo to configure the webpack environment. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Create a demo
2. Enter the created webpack_demo directory to create a dist folder (for production) and a src folder (for development environment)
src folder: used to store the javascript code we wrote, which can be simply understood as a module written in JavaScript.
dist folder: used to store files for the browser to read. This is a file packaged by webpack.
3. Write program files:
Manually create an index.html file under the dist file
/dist/index.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title></head><body>
<p id="title"></p>
<script src="./bundle.js"></script></body></html>Explanation: The bundle.js file is introduced here. Later, webpack can be used to generate an entry.js entry file under src
##/src/entry.js:document.getElementById(‘title’).innerHTML=’Hello Webpack’;
- Then webpack packaging:
will generate the bundle.js file in the dist directory
Global installation of live-server:npm install -g live-serverInstallation After completion, execute live-server in the terminal and the Hello Webpack information will be displayed in the browserRelated recommendations:
Steps to install Webpack using the command line
What are the css selectors? Summary of css selector usage
The above is the detailed content of Introduction to the method of establishing demo and configuring webpack environment. For more information, please follow other related articles on the PHP Chinese website!