Introduction to the method of establishing demo and configuring webpack environment-CSS Tutorial-php.cn

Introduction to the method of establishing demo and configuring webpack environment

不言

Release： 2018-08-18 15:15:33

Original

2562 people have browsed it

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>

Copy after login

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’;

Copy after login

Then webpack packaging:

1. Enter in the terminal in vs code: webpack src/entry.js dist/bundle.js After successful execution, the bundle.js file will be generated in the dist directory, and the Hello Webpack information will be displayed in the browser

2. It may also be packaged like this: src/entry.js –output dist/bundle.js –mode development

will generate the bundle.js file in the dist directory

Global installation of live-server:

npm install -g live-server

Copy after login

Installation After completion, execute live-server in the terminal and the Hello Webpack information will be displayed in the browser

Related 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!