Background application package 1.pc ends
npm component can not be directly introduced js browser, so must rely on other tools webpack
jsx is unable to resolve directly in the browser, use conversion tool
Packing speed and page volume resource issues
4. build tools need reasons:
Conversion es6 grammar, JSX
css prefix complement / preprocessor
Compression confusion
Image Compression
5.webpack reason
the amount of active github
Community Eco-rich
Flexible configuration, plug-in extensions
Iteration official update soon
6. Zero Configuration webpack:
Only entry and output, entry specifies the default entry is: ./src/index.js.
specify the default output is: ./dist/main.js
8.
> // using the following command:
./node_modules/.bin/webpack
Generate bundles.js file.
Next, create a new directory at the same level bundles.js index.html file, introduced bundles.js in src script tag of this file, open the browser, you can
9. increase "build" in package.json, do the "npm run build", but also can produce bundle.js file
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
10.entry usage:
Single entry: entry is a string; multi-entry: entry is the object (key-value)
11.Output used to tell we'b'pack how to output the compiled files to disk.
Multi-output inlet configuration: Make sure the file name by a unique placeholder, such as [name] .js
12.loaders:
webpack box support and json js only two types of files, by loaders to support other file types and convert them into an effective module, and may be added to the dependency graph. Itself is a function that takes a source file as a parameter and returns the result of the conversion.
babel-loader convert new features syntax ES6, ES7 and other js
css-loader file-loader, etc.
module rules in test match rule, use the loader using the specified name
13.plugins:
Plug-in for optimized bundle of files, resource management and environmental variables injected, acting on the entire build process
Loaders can not do anything, you can use plugins to complete
CommonChunkPlugin ZipWebpackPlugin....
14.mode:
Specifies the current mode of production development environment to build or none
Webpack mode settings can be used built-in functions, production defaults
15. resolve ES6 react jsx:
rules:[
{
test:/\.js$/,
use:'babel-loader'
}
]
// install the necessary files:
npm i @babel/core @babel/preset-env babel-loader -D
* Enter the html file in vscode in!, In the pop-down prompt, select "!", Enter, there will be a default html file templates out!
// Add react the babel preset configurations:
{
"preset":[
"@babel/preset-env",
"@babel/preset-react"
],
}
// install the necessary files:
npm i react react-dom @babel/preset-react -D
16. parse CSS LESS SASS
css-loader for loading .css file, and converted into an object commonjs
style style-loader is inserted into the head through the <style> tag
* <script src="./search.js" type="text/javascript"></script> //其中是type
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test:/.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
//search.css search.less:
.search-text {
font-size: 20px;
color: #f00;
}