In daily development, it is common to encounter this kind of header and tail, multiple pages have the same HTML structure, if each page adds the same code, it will make the file appear bloated, and the later maintenance cost is also very large. Therefore, we can extract this common HTML into a component-like form and import it directly into the page

Gulp implements shared HTML

This reference is not recommended because it cannot compile in real time.

Using Webpack’s EJS template for HTML sharing:

Project Structure:

Online browsingLot. Czero. Cn/webpackcomm…

Github source code, welcome star

The installation

npm install ejs-loader 
npm install ejs-render-loader
npm install ejs-html-loader
Copy the code

Add it to webpack.config.js loader

{
	test: /\.ejs$/,
	loader: 'ejs-html-loader',			     
},
Copy the code

Change the.html suffix to.ejs

Then in HTMLWebpackPlugin, specify template as

template: 'ejs-render-loader! index.ejs',Copy the code

Create public HTML and place it in the common folder. This demo shares header and footer. Then create header. HTML and footer.html

common/header.html

<header class="header_tab inlink-flex"> <a href="index.html"><div class="tabItem tabIndex"> Home </div></a> <a Href ="second. HTML "><div class="tabItem tabSecond"> </div></a> <a href="three. HTML "><div class="tabItem" </div></a> </header>Copy the code

common/footer.html

<footer> This is the common tail code </footer>Copy the code

Introduce public page headers and tails in. Ejs

index.ejs

<% include common/header. HTML %> <div> <% include common/footer. HTML %>Copy the code

second.js

<% include common/header. HTML %> <div> This is the second page </div> <% include common/footer.html %>Copy the code

This will solve the HTML sharing problem.

• The img path referenced in the.ejs file will not be found when NPM run dev is debugging code.

The solution is to add CopyWebpackPlugin to webpack.config.js and copy the IMG folder into production

Introduce the plug-in in webpack.config.js

var CopyWebpackPlugin = require('copy-webpack-plugin');
Copy the code

Plugins in Module. exports:

new CopyWebpackPlugin([{
     from: 'runtime/images/*'
}])
Copy the code

Development and production environments are separated

Separating the development environment from the production environment improves the readability and maintainability of the code. Different debugging methods are declared in different environments, and the speed of execution and packaging is different

For example, in a development environment, we don’t have to use it

Babel, ExtractTextPlugin UglifyJSPlugin, postcss, etcCopy the code

Some loader and plug-in use, because it can speed up our compilation speed, reduce waiting time, improve development efficiency.

In production, we need to compress files, remove whitespace and comments, add CSS suffixes, add declaration comments to JS files, separate CSS, convert ES6 to ES5, improve compatibility, and more.

# # method:

In package.json file

"scripts": {
    "build": "webpack --optimize-minimize",
    "dev": "webpack-dev-server --config webpack.dev.config.js --open",
    "start": "npm run dev"
  },
Copy the code

In the script declaration, specify that dev is running webpack’s

NPM run dev performs the webpack.dev.config.js configurationCopy the code

When you perform

NPM run build performs the webpack.config.js configurationCopy the code