So the above steps are omitted,
Here we need to create a basic project structure similar to before,
Go to package.json first
This involves a place that is different from the ordinary environment
The startup command in the script needs to have two
We use two keywords to distinguish the production environment and the environment where the code is released. dev represents the production environment, and build represents the release environment
So let's first explain the difference between the production environment and the release environment:
The production environment is an environment used by programmers to develop projects, and many automated functions will be added to facilitate the development experience of programmers.
For example, the interface for writing code is automatically refreshed, css compatibility is completed, and when developers create new modules, the code will automatically generate files and other functions.
However, these functions are not needed after the project is published to the online server. If they are manually added to the interface and logic code, they will be removed manually when the project is published.
It is a very painful thing, and one more thing, when the project is released, a lot of js code and css code need to be compressed and obfuscated, so we actually need to
An environment is called a release environment, this environment executes the same set of code but requires two results, so we split production and release into two environments, but we
There is no need to create two projects to develop a set of code, so at this time, it is necessary to allocate the labels of the two environments
After understanding this
We use a line of code in the www file to identify the current production environment or the release environment
//Identify the environment indicator (the parameter dev passed by the startup service is the production environment, and build is the build and release environment)
process.env.NODE_ENV = process.argv.splice(2);
The parameters passed when starting the service can be obtained through process.argvIn this way, we can make judgments based on different startup instructions
Next, let's take a look at the file structure of this project
The server configuration code of the entire project is in the bin folder
Place the compiled project files in the public folder
src is the directory structure of the development code
Here's the difference between compiling and developing code
Due to the increasing complexity of front-end programmers and front-end architecture,
When developing projects, many programmers will use development languages other than native code.
Such as scss, ts, less, sass, etc.
These codes cannot be executed directly by the browser, so they need to be compiled into native css, js, html, etc.
If it is an extremely inefficient choice to translate the code every time it is executed online, we have an extra set of things called source code
When developing, programmers can develop according to the language they are best at.
After the development, the project still runs html, css and js
So one of src and public is a structure for writing code, and the other is a structure for generating code.
Here if you are a java programmer, it will be easy to understand the compilation and execution process
Then we focus on the part of the configuration file:
Today's configuration file shows app.js pakage.js postcss.config.js webpack.config.js
Add an extra page.config.js
This file is not an official plugin, but a configuration file written by the author.
Its role is to generate a fixed file structure,
When we are developing the webpack project
js, css and other files have a fixed structure, we can customize a generated file system according to the structure we are familiar with
In this way, the repeated code can be automatically generated by the tool, and we do not need to waste time on creating files,
So the main function of page.config.js is to generate corresponding html, js, css files under src according to the internal structure
and generate the initial structure
The file structure is as shown above,
What needs to be explained here is that Xiaobai should not foolishly think that this file will come with this function,
The function is obtained by writing your own code for your own project structure,
So how does our configuration file execute?
has two entrances
The first is when starting the server,
The code will automatically detect. If it is currently a production environment, it will read the configuration file and scan the files under src according to the json structure inside. If the configuration file contains
If there are nodes that are not in the file structure, files with the same name as the nodes will be generated in js html css respectively
The second is that when we are writing the code, it is possible that the server is still starting at this time, so there is no need to restart the server, just in the structure of this json
Continue to add nodes down, when the file is saved with crtl+s, the code will automatically detect the file change and generate the specified file in the folder,
The ability to realize this webpack-like function all depends on the powerful code environment of nodejs
There is a watch method in the familiar fs module, which is a method that can detect file changes. Through this module, we can trigger the corresponding code execution when the file is changed.
The process here is
When the file changes, we read the content of the file and execute the content of makeUserDir
Some people here will ask why you use fs to read files instead of require to get the content directly,
This is because require reads data from the cache, and subsequent changes to the file after we start the server will not trigger changes to the cache.
We directly read the physical data of the file to get the latest configuration content.
Next is the process of webpack
This is at startup, if it is a production environment, turn on watch mode
We still use socket to notify the client to refresh without using other plugins
Below is the configuration file for webpack
var htmlWebpackPlugin = require('html-webpack-plugin');
var extractWebpackPlugin = require('extract-text-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
var fs = require('fs');
var config = {
entry:{
//Load the source code of hmrjs
hmr:'./src/plugins/hmr.js',
},
output:{
filename:'js/[name].js',
path:path.join(__dirname,'public')
//publicPath:'http://localhost:3000'
},
externals: {
'view': 'View',
'vue-router': 'VueRouter',
'VueResource': 'VueResource'
},
module:{
rules:[
{
test:/\.(gif|jpeg|jpg|png)\??.*$/,
loader:'url-loader?limit=1000&name=img/[name].[ext]'
},
{
test:/\.(woff|svg|eot|ttf)\??.*$/,
loader:'url-loader?limit=1000&name=fonts/[name].[ext]'
},
{
test:/\.html$/,
loader:'html-loader'
},
{
test:/\.js$/,
loader:'babel-loader'
}
]
},
plugins:[
new extractWebpackPlugin('css/[name].css'),
]
}
//If it is a production environment, add the automatic opening of the browser and compile the normal css file
if(process.env.NODE_ENV=='dev'){
config.plugins.unshift(new OpenBrowserPlugin({ url: 'http://localhost:3000/index' }));
config.module.rules.unshift({
test:/\.css$/,
loader:extractWebpackPlugin.extract({
fallback:'style-loader',
use:'css-loader!postcss-loader'
})
});
}
//If it is a release environment, add code compression
if(process.env.NODE_ENV=='build'){
config.module.rules.unshift({
test:/\.css$/,
loader:extractWebpackPlugin.extract({
fallback:'style-loader',
use:[{
loader:'css-loader',
options:{minimize:true}
},'postcss-loader']
})
});
config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}
var jsDocs = fs.readdirSync('./src/js');
for (var i = 0; i