1. Devtool sets sourcemap
Devtool Settings soucre – map
devtool: "source-map",
Copy the code
// a map file will appear, which maps source code to bundle files
Level 1: source-map A very detailed mapping of code to bundle code that produces a map file
Level 2: Inline-source-map does not generate map files and is packaged with JS code
Level 3: EVAL Each module is executed using eval(), providing == fast reconstruction speed ==
Level 4: cheap added this keyword, the error is only accurate to the number of rows but not to the number of columns
Level 5: Module added this keyword, third party keyword positioning
Eval: Each module is executed using eval() and // @sourceURL. It is very fast. The main disadvantage is that it does not display the line number correctly because it is mapped to the transformation code rather than the original code (there is no source map from the loader).
2. Eval-source-map: Each module is executed using eval(), and SourceMap is added to eval() as the DataUrl. Initially it is slow, but it provides fast reconstruction speed == and produces real files
2, webpack – dev – server
devServer: {
contentBase: './dist'.// Default directory to use
hot: true.// The CSS does not support contenthash and chunkhash after the hot module update is started. The old version cannot be split by minicss.loader
hotOnly: true.// Set to true to turn off browser refresh
clientLogLevel: 'warning'.historyApiFallback: { // This is useful for developing single-page apps, which rely on the HTML5 History API, and if set to true, all jumps will point to
rewrites: [{from: /. * /,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')}}],compress: true.open: true.// Open the browser
overlay: config.dev.errorOverlay
? { warnings: false.errors: true }
: false.// to display errors on the browser page when compiling errors occur
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
},
Copy the code
For CSS file modification only
devServer: {
hot: true,
}
// ....
new webpack.HotModuleReplacementPlugin(),
Copy the code
Modify for JS
DevServer: {hot: true, hotOnly: true, // Set to true to close browser refresh} //... new webpack.HotModuleReplacementPlugin(),Copy the code
if (module.hot) {
module.hot.accept('Some file imported'.() = >{})}Copy the code
3. About Babel
Support ES6 syntax, compatible with earlier browsers
Simple understanding:
Es6 syntax: arrow function classes, etc
Es6 features: Promise class, etc
Plug-in:
@babel/preset-env // Works on ES6 syntax
@babel/ react // JSX syntax
How do I configure es5 compatible syntax?
Through the Babel – loader
npm i @babel/core babel-loader
Copy the code
{
test: /\.js$/,
use: {
loader: 'babel-loader'.options: [
presets: ['@babel/preset-env'] // The syntax is resolved, but the features are not]}},Copy the code
Also introduce the Polyfill installation into the build dependency
npm i @babel/polyfill
Copy the code
. Babelrc configuration
{
"presets": [["@babel/preset-env",
{
"corejs": 2."useBuiltIns": "usage" // The difference between entry, Usage, and false}}]]Copy the code
Read more:
www.cnblogs.com/amiezhang/p…
www.babeljs.cn/docs/babel-… The official