一、webpack-dev-server
1, the installation
cnpm install webpack-dev-server -D
2, the role of
Open a web service, monitor file changes and automatically refresh the page, do real-time preview. Support Source Map, in order to facilitate debugging
3, the basic use
devServer:{
contentBase:path.join(__dirname,"dist"),
host:"127.0.0.1"
open:true,
proxy:{
"/api":{
target:"http://www.baidu.com",
changeOrigin:true
}
},
prot:8080
}
contentBase: local server to load the page directory
host: Specifies the host address
hot: thermal module replacement
hotOnly: Enable heat module replacement without a page refresh
open: tell the dev-server open the browser after the server is started. It is set to true open the default browser.
proxy: proxy agent across domains
prot: Set the port number
Second, the thermal module updates (Hot Module Replacement)
1, the role of
When we assume that the module style changes only need to update the css, you do not need to reload the entire page. Convenient for debugging css
2, the basic use
constwebpack=require("webpack");
module.exports ={
devServer:{
contentBase:"./dist",
open:true,
port:8080,
hot:true,//开启Hot Module Replacement
hotOnly:true
},
plugins:[
newwebpack.HotModuleReplacementPlugin()//webpack自带的插件
]
}
Three, sourceMap configuration (problem)
sourceMap is a mapping relationship, it will go wrong part of the file after the package before we pack the corresponding part file error, so for our code debugging is very convenient
sourcemap to help us solve debug the code development is inconsistent with the actual running code technology to develop original code
Note that if the package configuration sourceMap slow down back
Module1. Exports = { DevTools: "none" // Close DevTools: "Source-Map" DevTools: "Source-inline-Map" // file will have been mapped into the form of a string package file } Module1. Exports {= DevTools: "Cheap-Module1 the eval-Source-Map-", // dev environment DevTools: "Cheap-Module1-Source-Map", // online environment }
inline: mapping file will have a string of the form to go into the package file
cheap: only responsible for the business bug in the code, it will not be responsible for errors node_modules
module: allows the source responsible for node_modules errors
Four, resolve
Webpack at startup from the entrance module configured to identify all dependent modules, Resolve configuration file Webpack how to find the corresponding module. Webpack modular built-in JavaScript parsing function, by default in a standard modular agreed to find a good rule, but you can also modify the default rule according to their needs
alias
Configuration item to the original path mapping alias introduced by introduction into a new path
resolve:{
alias:{
components: path.join(__dirname,'./src/components/')
}
}
extensions
When you import statement did not bring file suffix, Webpack the suffix will be automatically put on whether to try to access the file exists. resolve.extensions a list of suffixes used in the process of trying to configure the default is
['.js', '.json']That is when encountered
require('./data')when such an import statement, Webpack will go looking for./data.jsthe file, if the file does not exist go for the./data.jsonfile, if you still can not find on the error
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
Five, webpack-merge
Separation profile
We created in the root directory config folder, and create four profiles:
webpack.comm.js public environmental profile
Profiles in webpack.development.js development environment
Webpack.production.js configuration files in the production environment
webpack.parts.js various parts of the configuration profile
If the configuration file is divided into many different parts, it must somehow be a combination of them, usually the merger arrays and objects, webpack-merge good to do this.
webpack-merge does two things: it allows the combined connector and an array of objects, rather than covering the composition
installation
cnpminstallwebpack-merge--save-dev
Connecting each profile is provided
constbaseWebpackConfig=requie("./config/base.config.js");
constwebpackMerge=require('webpack-merge');
constwebpackConfig=webpackMerge(baseWebpackConfig, {
})
module.exports=webpackConfig