Front-end engineering
1. Modularity
1.1 Server modular specifications
CommonJS
- Modules are divided into single file modules and packages
- Module member exports: module.exports and exports
- Module member import: require (‘ module identifier ‘)
Ex. :
a.js
let a = 10
let b = 20
module.exports = {
a,b
}
Copy the code
b.js
const a = require('./a.js')
console.log(a)
Copy the code
1.2 ES6 Modularization
ES Module treats a file as a Module, and each Module has its own independent scope. How do you link each Module together?
The core point is the import and export of modules.
1.2.1 the module exports
Let’s transform the above code into ES6 format
let a = 10
let b = 20
export default {
a,b
}
Copy the code
b.js
import a from './a.js'
console.log(a)
Copy the code
Pay attention to
- The browser does not support the IMPORT of ES6 by default. Use NPM init -y to initialize the import
- Add “type”: “module” to package.json
1.2.2 Import and Export on Demand (Export)
a.js
export let a = 10
Copy the code
b.js
import {a} from './a.js'
console.log(a)
Copy the code
1.2.3 Directly execute the module code
a.js
for (let i = 0; i < 5; i++) {
console.log(i)
}
Copy the code
b.js
import './a.js'
Copy the code
1. To summarize
- Only when export Default is used, variable names in B. js can be arbitrarily named
- When exporting directly using export, the variables in B. js must be the same as those in a.js and need to add {}.
- To use it in a browser, you need to set type=”module” to the script tag.
Second, the webpack
2.1 Installing and Configuring the WebPack
2.1.1 installation webpack
npm install webpack webpack-cli --save-dev
- Can be abbreviated as:
npm install webpack webpack-cli -D
- Dev represents the development environment. Save represents the production environment
2.1.2 configuration webpack
Create a webpack.config.js file in the current directory
module.exports={
mode:'development' // Development mode
mode:'production' // Production mode
}
Copy the code
Then write to scripts in packPage. json
"dev":"webpack"
Copy the code
Finally, run the command in the terminal
npm run dev
Copy the code
2.2 Package export and export documents
By default, index.js is packaged in the SRC directory
Entrance to the file
It is the first file to be accessed when a project or program is requested, and this file is processed by the corresponding module
In the current project, index.html is the entry file because that’s what we’re requesting
But for Webpack, the entry file is index.js, because index.js introduces modules needed by other programs and writes the corresponding logic code
The export file
The directory and name of the packaged file
Webpack has some default configurations
webpack.config.js
const path = require('path')
module.exports = {
// mode:'development'
mode: 'production'.entry: path.resolve(__dirname, 'src/app.js'), // Import file
output: {
path: path.resolve(__dirname, 'dist'), // Export file
filename: 'bundle.js' // File name after packing}}Copy the code
- It is recommended that the output file name be bundle.js, and note that you change the import file in index.html to bundle.js
2.3 Automatic Packaging
Use the webpack – dev server. –
Webpack-dev-server gives you a simple Web server with live reloading.
Installation:
npm install --save-dev webpack-dev-server
Copy the code
Modify the startup command in package.json
"dev":"webpack serve"
Copy the code
Run after
npm run dev
Copy the code
Note:
- Using webpack-dev-serve to pack the address is
localhost:8080
- When packaged, Webpack-dev-serve is not written to any output files but stored in memory
2.4 Generating a preview page
Current problems: localhost:8080 corresponds to the website and directory, and index.html is in the SRC directory, which is difficult to access
Solution: Copy index.html from SRC to the root directory so that when localhost:8080 is accessed, the index.html will be rendered by default
However, if you need to manually copy index. HTML after modifying it, you can use the plugin:
HtmlWebpackPlugin
Installation:
npm install --save-dev html-webpack-plugin
Copy the code
Then we need to introduce it in webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
Copy the code
At the same time we need to install
npm i loader-utils -D
Copy the code
Configuration HtmlWebpackPlugin
const htmlPlugins = new HtmlWebpackPlugin({
template:'./src/index.html'.// The file to copy
filename:'index.html' // Copy to where
})
plugins: [htmlPlugins]
Copy the code
Then retrograde NPM run dev
But index. HTML is not in the root directory because it is still created in memory
2.5 summarize
webpack-dev-serve:
- A service is enabled at localhost:8080, which by default corresponds to the root directory of the project
- Changes to the code will automatically repackage and generate a bundle.js file in memory without overwriting the bundle.js file in the dist directory
- The path to access bundle.js is localhost:8080/bundle.js
html-webpacl-plugin:
- Automatically copy the HTML files in the specified path to the specified directory (such as the root directory) according to the configuration.
- Copy is made every time you run the package command
- It also exists in memory
2.6 loader
By default, webpack can only package.js module files. Other static files, such as.css and images, cannot be processed by default. If the corresponding loader is not loaded, an error will be reported
Webpack supports preprocessing files using the Loader. You can build any static resource, including JavaScript.
2.6.1 Processing CSS Files
Install loader
npm install --save-dev css-loader style-loader
Copy the code
Configuration webpack. Config. Js
module: {rules:[
{test:/\.css$/,use:['style-loader'.'css-loader']]}}Copy the code
Loader calls go back to front
2.6.2 Processing LESS Files
The installation
npm install less-loader less -D
Copy the code
configuration
{test:/\.less$/,use:['style-loader'.'css-loader'.'less-loader']}
Copy the code
Then repack
2.6.3 Processing pictures and text
The installation
npm i file-loader url-loader -D
Copy the code
configuration
{
test: /\.png$/,
use: [{
loader: 'url-loader'.// Use url-loader to process packaged images
options: {limit:10750}}}]Copy the code
- Images that are smaller than the limit value are imported and packaged as base64-bit codes
- Instead of being packaged, it is referenced as a resource
2.6.4 Processing advanced JS syntax
The installation
npm install -D babel-loader @babel/core @babel/preset-env
Copy the code
Add the following rules to webpack.config.js
{
test: /\.m? js$/,
exclude: /(node_modules|bower_components)/.// exclude effects from node_modules
use: {
loader: 'babel-loader'.options: {
presets: ['@babel/preset-env'].// Processing mode}}}Copy the code
Write to index.js
class Person{
static age = 10
}
console.log(Person.age)
Copy the code
When finished we execute the package command NPM run dev
Later we found that the error was reported because the plugin for the Babel syntax was not installed
Installation:
npm i -D @babel/plugin-proposal-class-properties
Copy the code
Then add the configuration to the option property of the rule above
plugins: ['@babel/plugin-proposal-class-properties'] // New configuration
Copy the code