This time I will bring you the loader usage analysis of webpack3. What are the precautions for loader usage analysis in webpack3? The following is a practical case, let's take a look.
First show the official website of webpack. What can webpack do? The answer given by the official website is, in one sentence, it makes everything simple! Various loaders emerge in endlessly, leaving us at a loss when building. Here, we summarize the full analysis of loaders.concept
Loader, as the name suggests, loader, the English explanation is as follows: Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to The Chinese translation is: The loader is used to convert the source code of the module. A loader allows you to pre-process fileswhen importing or "loading" a module. Therefore, loader Similar to "tasks" in other build tools, and provides a powerful way to handle front-end build steps. The loader can load files from different languages such as TypeScript) to JavaScript, or inline images to data URLs. loader even allows you to directly use JavaScript Import CSS files in the module! From this, we can see the powerful role of loader. Let’s analyze it:
Commonly used loaders
1、babel-loader
This package allows transpiling JavaScript files using Babel and webpack.
Load ES2015 code and use Babel to transpile it to ES5
Installation:
npm install --save-dev babel-loader babel-core babel-preset-env webpack
Use:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}2、style-loader
Adds CSS to the DOM by injecting a