preface
First of all, we first understand what front-end engineering is, and then look at the solutions of front-end engineering solutions, and then understand the basic use of WebPack and its commonly used plug-ins. Finally, take a look at how WebPack implements packaged distribution and how Source Map can help us troubleshoot.
Front-end engineering
Front end vs. actual front end development
- The front of the eye
As long as you know HTML, CSS, JavaScript, you can develop a quick layout structure. LayUI is like you want to manipulate the DOM or send an Ajax request to the server
- Actual front-end development
Modularization (modularization of JS, CSS and resources) modularization (reuse of existing UI structure, style and behavior) standardization (division of directory structure, standardization of coding, standardization of interface, standardization of documents, Git branch management) automation (automatic construction, automatic deployment, automatic testing)
What is front-end engineering
In the enterprise front-end project development, the front-end development required tools, technology, process, experience, standardization.
Three, front-end engineering benefits
Front – end development system, a set of standard development programs and processes.
Fourth, front-end engineering solutions
- Early front-end engineering solutions
grunt(https://www.gruntjs.net/) gulp(https://www.gulpjs.com.cn/) 2. The front end of the current mainstream engineering solution webpack parcel (https://www.webpackjs.com/) (https://zh.parceljs.org/)
webpack
What is Webpack
1, concept,
Specific solutions of front-end project engineering
2. Main functions
Can provide friendly front-end modular development support, as well as code compression confusion, handling browser side JavaScript compatibility, performance optimization and other powerful functions
3, good
Let programmers focus on the implementation of specific functions, improve front-end development efficiency and project maintainability. ,
2. Basic use of Webpack
1. Install WebPack in your project
NPM install [email protected] [email protected] -d
2. Configure WebPack in your project
Create a new webpack.config.js file in the root directory of the file and write the following code in the file
module.exports = {
// Specify the build mode with two optional parameters
// Use development in the development phase because it is fast to package
// Production is used in the launch phase, because the project launch requires a small file size
mode:'development'
}
Copy the code
- This parameter is optional for the mode object
- development
The development environment does not perform code compression and performance optimization on the files generated by packaging. The packaging speed is fast and suitable for use in the development stage
- production
The production environment performs code compression and performance optimization on the files generated by packaging. The packaging speed is slow and is only suitable for project release
- What the webpack.config.js file does
Webpack.config.js is the webpack configuration file. Webpack reads this configuration file to package the project based on the given configuration before actually starting to package the build. Note: Webpack is a packaging tool developed based on Node.js, so in its configuration file, support to use node.js-related syntax and modules for webpack personalized configuration.
In the scripts node of package.json, add the following dev script
"scripts": {// npm run dev
"dev":"webpack"
}
Copy the code
Run NPM run dev in CMD terminal to start webPack for the project package build
3, Webpack packaging entrance and exit
- The default conventions
In webpack 4.x and 5.x, there is a default convention ① the default package entry file is SRC -> index.js ② the default output file path is dist -> main.js 2. Customizing the entry and exit of packaging In the webpack.config.js configuration file, the entry node specifies the entry of packaging. Specify the packaged exit through the output node
const path = require('path')
module.exports = {
mode:'development'.//entry:' Specify which file to process '
entry:path.join(__dirname,'src/xxx.js'),
// Specify where to store the generated files
output: {// The directory to store
path: path.join(__dirname,'dist'),
// The generated file name
filename: 'bundle.js'}}Copy the code
- Problem: Every time you modify the source code, you need to do it in the terminal
npm run dev
Command. Very troublesome!
Plug-ins in WebPack
1. The webPack plugin
By installing and configuring third-party plug-ins, you can extend the power of WebPack and make it easier to use.
2. Common plug-ins
- webpack-dev-server
- role
Similar to the Nodemon tools used in the Node.js phase, webPack will automatically package and build the project whenever the source code is modified
- NPM command
Run the following command: NPM install [email protected] -d
- configuration
Modify package.json -> scripts dev command as follows: run the NPM run dev command again to package the project again. Visit http://localhost:8080 in the browser to view the package effect
"scripts": {
"dev":"webpack serve"
}
Copy the code
Note: The generated export file is in the root directory and is saved in memory
- html-webpack-plugin
- role
The HTML plug-in in WebPack allows you to customize the content of the index.html page
- NPM command
Run the following command: NPM install [email protected] -d
- configuration
Configure it in the webpack.config.js file
// Import the html-webpack-plugin plugin to get the constructor of the plugin
const HtmlPlugin = require('html-webpack-plugin')
// Create an instance object of the HTML plug-in
const htmlPlugin = new HtmlPlugin({
// Specify a path for storing the original file
template:'./src/index.html'.// Specify the path to the generated file
filename:'./index.html'
})
module.exports = {
mode:'development'.// htmlPlugin takes effect via plugins
// An array of plugins that webPack will load and call when it runs in the future
plugins:[htmlPlugin]
}
Copy the code
Note: a script is automatically injected into index.html and the copied index.html page is also stored in memory
3. DevServer node
Add the following to webpack.config.js
devServer : {
// Automatically open the browser after the initial packaging
open:true.// Change the port number
// In HTTP, the port number 80 can be omitted
port:80.// Specify the address of the running host
host:'127.0.0.1'
}
Copy the code
Note: if you modify the webpack.config.js configuration file, or modify the package.json configuration file, you must restart the real-time packaging server, otherwise the latest configuration file will not take effect!
Webpack loader
In actual development, WebPack can only package modules with.js extensions by default. Webpack cannot process other modules whose names do not end with.js suffix by default. You need to call loader to pack them normally, otherwise an error will be reported.
1. The function of loader
Assists WebPack in packaging specific file modules.
2. Common loader
- Packing and processing CSS files (CSS-loader)
- NPM command
Run NPM I [email protected] [email protected] -d
- configuration
In the module -> rules array of webpack.config.js, add the loader rule as follows
module: {rules: [//test is the file type
//use Indicates the loader to be invoked
{test:/\.css$/,use:['style-loader'.'css-loader']]}}Copy the code
Note: The loader sequence in use is fixed, and the call sequence is called from back to front.
- Packing and processing less files (less-loader)
- NPM command
Run the NPM I [email protected] [email protected] -d command
- configuration
In the module -> rules array of webpack.config.js, add the loader rule as follows
module: {rules: [// Match rules for file name extensions
{test:/\.less$/,use:['style-loader'.'css-loader'.'less-loader']]}}Copy the code
- Package files related to the URL path in the processing stylesheet (file-loader)
- NPM command
Run NPM I [email protected] [email protected] -d
- configuration
In the module -> rules array of webpack.config.js, add the loader rule as follows
module: {rules: [// Loader to process image files
// If only one loader needs to be called, then the value passes a string, such as multiple loaders
{test:/\.jpg|png|gif$/,use:'url-loader? limit-22229'}}]Copy the code
Among them? The loader argument follows:
Limit specifies the size of an image in bytes. Only images whose size is less than or equal to limit are converted to Base64Copy the code
- Advanced syntax in package processing JS files (babel-loader)
- NPM command
Run NPM I [email protected] @babel/[email protected] @babel/[email protected] -d
- configuration
In the module -> rules array of webpack.config.js, add the loader rule as follows
module: {rules: [// To configure babel-loader, the programmer only needs to convert his own code; Be sure to exclude js files in the node_modules directory
{test:/\.js$/,use:'babel-loader'.exclude:/node_modules/}}]Copy the code
Create babel.config.js in the root directory and define the following configuration items for Babel:
module.exports = {
// Declare the plugins available for Babel
plugins: [['@babel/plugin-proposal-decorators', {legacy:true}}]]Copy the code
Packaging releases
First, why package release?
- In the development environment, the generated files are stored in the memory and cannot be obtained
- In the development environment, the generated files are not compressed or optimized for performance
Configure webpack distribution
Under the scripts node of package.json file, add the following build command:
"scripts": {In the development environment, run the dev command
"dev":"webpack serve".// Run the build command when the project is published
"build":"webpack --mode production"
}
Copy the code
— Model is a parameter that specifies the mode in which WebPack will run. Production represents the production environment and performs code compression and performance optimization on the files generated by packaging.
Note: The parameter specified by –model overrides the model option in webpack.config.js
1. Generate JavaScript files into the JS directory
In the output node of the webpack.config.js configuration file, do the following:
output: {
path: path.join(__dirname,'dist'),
// Explicitly tell WebPack to put the generated bundle.js file in the JS subdirectory in the dist directory
filename: 'js/bundle.js'
}
Copy the code
2. Uniformly generate the image files into the image directory
Modify the url-loader configuration item in webpack.config.js and add the outputPath option to specify the outputPath of the image file:
{
test: /\.jpg|png|gif$/,
use: {
loader: 'url-loader'.options: {
limit: 22228.// Explicitly specify that the image files generated by packaging are stored in the image folder in the dist directory
outputPath: 'image'}}}Copy the code
3. Automatically clean old files in dist directory
Refer to the website: https://www.npmjs.com/package/clean-webpack-plugin
Source Map
What is Source Map?
It’s an information file that stores the location information. In other words, the Source Map file stores the position of the compressed and obfuscated code before the transformation.
Two, how to use?
- In the development environment
It is recommended to add the following configuration to webpack.config.js to ensure that the number of error lines is consistent with the number of lines in the source code
module.exports = {
mode:'development'.devtool:'eval-source-map'
}
Copy the code
- Production environment
If the devtool option is omitted, the resulting file does not contain the Source Map. This prevents the original code from being exposed to someone else in the form of a Source Map. Or setting devtool to nosource-source-map will only locate the number of lines in error and not expose the source code.
supplement
NPM command supplement
- – S is
--save
The shorthand
-d = “save-dev”; -d = “devDependencies”; -d = “devDependencies” Place the file in devDependencies
Use @ to indicate the SRC source directory
Add a resolve node to webpack.config.js
resolve:{
alias: {// Tell Webpack that the @ symbol represents the SRC directory in the programmer's code
The '@':path.join(__dirname,'/src/')}}Copy the code
conclusion
For a front-end engineering solution, Vue provides us with the Vue CLI scaffolding tool, which is built on WebPack and comes with reasonable default configuration. It allows us to focus on writing apps instead of spending days obsessing over configuration issues. Finally to everyone in the Vue CLI website address https://cli.vuejs.org/zh/, call it a day here, bye ~