[vue] devserver and its configuration

content

1. Devserver background

Every time you change the code, you need to redeploy it,
or only change the effect of modifying the code line,
so there is a devserver local service.
In order to complete automatic compilation, webpack provides several optional modes.
Method 1: webpack watch mode

Implementation method 1: In the exported configuration, add watch: true
Implementation method 2: In the command to start webpack, add the flag of –watch

Method 2: webpack-dev-server (commonly used)

Two, webpack-dev-server

The above method can monitor file changes, but in fact it does not have the function of automatically refreshing the browser. Of course,
we can use live-server through vscode to complete such a function, but we hope that without using live-server , can have the function of real-time reloading
Steps:
1. Install npm install webpack-dev-server -D
2. Add the command "serve": "webpack serve"
3. Just run npm run serve

There is a feature of using this startup project:
the build folder will not be output
because when localhost8080—express (static files such as src)
is packaged, the src and other files are directly compiled and placed in the memory, and then the express framework is used to initiate the service.
If you compile first, put to the external storage, then upload it to the memory, and then use the express framework to initiate the service. that would reduce efficiency

insert image description here

3. Do some configuration on devserver:

In webpack.config.js, write

devServer:{
  contantBase:"./abc"
}

If <script.src="./aaa.js"> in index.html, it will look for abc/aaa.js when packaging. This is the function of contentBase, which can be understood as looking for files in the source code. The general value is " ./public"
because webcopyPlugin is configured in webpack.config.js, if it is not configured, static files such as pictures will not be
copied, and you need to search in the public folder.

Use constantBase in the general development stage
and use copyplugin in the general packaging stage (upload server)

4. Module hot replacement HMR

During the running of the application, replacing, adding, and deleting modules will re-refresh the entire page. Take the counter case as an example: it is
added to 199, and the js code adds console.log("aaa"),
causing 199 to become 0

target:"web"
 devserver:{
  contantBase:"./abc",
  hot:true，//热更新
 open:true,//build自动打开浏览器
 host://默认lolaohost，也可0.0.0.0，这样同一网段的主机都能通过ip访问
 port:7777//访问项目时的端口号
 compress:true浏览器请求静态资源时压缩一下，打开浏览器的检查时可以看到bundle.js的content-encoding是gzip，浏览器自动解压
}

main.js中，import "./js/element":改为
import "./js/element":
if(module.hot){
  module.hot.accept("./js/element.js",()=>{
    console.log("模块发生更新了")
   }
}

Modifying the message in the .vue file will also trigger module hot replacement. After
modifying this configuration, you need to restart npm run serve

5. Cross-domain access issues:

In the project code of localhost7777, axios has the data moment of localhost8000, and there will be a cross-domain access error, (browser does not allow cross-domain)
solution

devserver:{ contentBase:“./abc”, hot:true，open:true, host: port:7777 proxy:{ “/api”:“http://localhost:8888” } } Then change to axious axious("/api/moment") will still report an error, because when axious resolves, /api/moment will be resolved into http://localhost:8888/api/moment, so an error 404 will be reported. Solution: proxy: { " / api": { target: "http://localhost:8888", pathRewrite: { "^/api": "" }, secure: false, //If the target is https and secure is true, access to changeOrigin will be stopped :true,//The current project is localhost7777, the agent is localhsot8888, when the server is actually requested, the server will check where the source is, if no changeOrigin is added, then the server will see localhost:7777/api/moment in the header instead of 8888 }

insert image description here

Six, webpack's resolve:

The parentheses after import can be written as:

relative path
absolute path
node_module

The following introduces node_module:
There is one in webpack.config.js (if not, then all get the default value)
resolve: { modules : [“node_modules”]//The default is found here, so the folder cannot be renamed extension: [“ .js", ".vue"] alias:{ "js":path.resolve(__dirname,"./src/js"), "@":path.resolve(__dirname,"./src"), configure like this After uploading, the import in main.js does not need to start with ./ } } How to judge whether it is a file or a folder? If there is no suffix, then match js/json/jms to find the file. If there is, it is a file. If not, it is a file. Folder, if it is a folder, check if there is an index file in it

7. Distinguish between development environment and production environment

The build value in the command in package.json
is changed to "webpack --config ./config/webpack.prod.config.js"
and the serve value is changed to "webpack serve --config ./config/webpack.dev.config.js"

npm install webpack-merge

Create a new folder config
Create a new file webpack.prod.config.js

const {cleanWebpackPlugin}=require("clean-webpack-plugin")
const copyWebpackPlugin = require("copy-webpack-plugin")
const {merge} =require("webpack-merge")
const commonConfig= require("./config/webpack.common.config.js")

module.exports=merge(commonConfig,{
   mode:"production",
   plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
    patterns: [
      {
         from: ' "public" ,
         to: "./",
        glob0ptions: {
           ignore: [
              "**/ index . html"
           ]}
       }
    ]
  }))
]

New file webpack.dev.config.js

module.exports={
    mode:"development",
    devtool:"source-map",
    devserver:{
      contantBase:"./abc",
      hot:true，
      open:true,
       host:
       port:7777
       proxy:{
         "/api":"http://localhost:8888"
      }
   }
}

New file webpack.common.js

module.exports={
   公共的一些配置留在这个文件里
}