foreword
Continuing with the first introductory tutorial, this blog post mainly records some of the configurations I learned about webpack. I usually have to go to class, so the update is relatively slow, and I clench my fists!
loaders
Using different loaders, webpack can call external tools to process files in different formats. For example, less and scss are processed into css. Or convert the next-generation JS files (ES6, ES7) into modern browser-compatible JS files. For React development, suitable Loaders can convert the JSX files used in React into JS files.
We want to use loaders, which must be installed independently first, and then configured in webpack.config.js. Like the server above, it is a component.
The configuration of loaders has the following aspects:
- test - a regular expression to match the extension of files processed by loaders (required)
- loaders - the name of the loaders used to process the file (required)
- include/exclude - manually add files (folders) that must be processed / block files (folders) that do not need to be processed
- query - provides additional setting options for loaders
(In the blog I referred to, the blogger put the greeting in Greeter.js into a json file, but did not explain why. I think it may be useful later, or it may be a modular idea. Let's do it.)
1. Add a new config.json file in the app folder under the project, and enter:
2. Change Greeter.js again and quote the text in config.json in it!
(Note here that json loaders do not need to be added manually in my version.)
3. Come, come, run
Read on to see Babel before learning how to use loaders
Babel
What is Babel?
A platform for compiling javascript
Why should we use him?
With it, you can ignore whether the browser supports the latest js syntax (such as ES6),
js-based extension languages (such as JSX) can be used
Installation and configuration of Babel
1. Let's install some common Babel packages (one-time, separated by spaces):
2. Then configure in webpack.config.js:
Post the newly added code, it's a bit too much, so as not to make mistakes
module:{
rules:[
{
test:/(\.jsx|\.js)$/,
use:{
loader:"babel-loader",
options:{
presets:[
"env","react"
]
}
},
exclude:/node_modules/
}]
}
(I refer to this blog, he installed react and used it to test, but I don't want to be so troublesome, here only verify the syntax of es6 to test whether the loaders we installed earlier can work)
3. Create a new Person.js in the app folder
Input in es6 syntax (here, in order to detect whether es6 parsing can be successful, react parsing, try it yourself):
4. Modify main.js, here is just a new addition to introduce the Person we just built, the previous one will not move him
Now, run, yes, parsing es6 successfully!
Everything is a module
Webpack treats all files as modules. My understanding of this sentence is that the front-end css, js, fonts, etc. are treated as separate modules.
Learn the first piece
css
The style sheet processing tool webpack provides us with two, css-loader, style-loader, install first
Oh, I forgot to mention that webpack will package both css and js into js files, and will not generate a separate css file, so some proper configuration is required.
Now let's use
1. First configure it in webpack.config.js (and then configure it in the rules of babel's module previously)
Post the code as usual, so as not to make mistakes
,{
test:/\.css$/,
use:[
{
loader:"style-loader"
},{
loader:"css-loader"
}
]
}
2. Create a new file main.css in the app folder, and then make some adjustments to the style
Since it's just a test here, let's keep it simple. Give our div a background color.
3. Then introduce it in main.js
OK, let's run it
Well, with a very sao background.
The above said that css is also treated as a module, let's take a look at the more typical css module idea
css module
This is based on the award of js to break down the overall complex code into small parts and declare them to their respective dependent parts. Through the css module, the class name and animation name in css can only be applied to the current module, avoiding the global pollution of the code. Here is the link to the official documentation of the css module
css preprocessor
Both sass and less are extensions of css, but browsers cannot parse them directly. Usually, we all need a tool to compile sass into css. Now we can use webpack to do it, and we don't need to compile it manually.
Want to make your css more functional
Here let's try it out, add a prefix to css to adapt to different browsers
1. Install postcss-loader and autoprefixer
npm install --save-dev postcss-loader autoprefixer
2. Then configure it in the css section of webpack.config.js
{
test:/\.css$/,
use:[
{
loader:"style-loader"
},{
loader:"css-loader",
options:{
modules:true
}
},{
loader:"postcss-loader"
}
]
}
3. Create a new postcss.config.js in the root directory and add the following statement
4. Repack