Preface
When using webpack, the file is imported directly using the following code in the file, and the following error is displayed in the console: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
import './css/';
The reason is that only .js type files can be packaged by default in webpack, and other types of files cannot be packaged. If you want to package non.js type files, you need to manually install some third-party loader loaders.
The following are examples of packaging various file types:
Processing css files
Method one
Use the npm command to install the two packages of style-loader and css-loader locally in the project
npm install style-loader css-loader --save--dev
When referring to a file, change the import './css/'; code to the following code:
import 'style-loader!css-loader!./'")'; //Pass firstcss-loaderandstyle-loaderdeal with
Repack with webpack
npm run dev
The disadvantage of this method is that when multiple css files need to be introduced, you need to add style-loader!css-loader! every time you introduce it, it is more troublesome, so the following method is recommended:
Method 2
Use the npm command to install the two packages of style-loader and css-loader locally in the project
npm install style-loader css-loader --save--dev
Open the file and add a configuration node module to it. In the module object, there is a rules property, which is an array that stores all third-party file matching and processing rules. The following code matches the processing of the css file:
module: { // Configure all third-party loader modules rules: [ // Matching rules for third-party modules { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // loader for processing CSS files ]
}
Notice:Here the 'style-loader' and 'css-loader' order is not replaceable. Because the processing order in use is from back to front. First use css-loader to process the css file, and hand over the processed results to the style-loader for further processing, and process them as data that can be packaged by webpack.
Introduce files
import './css/';
Repack with webpack
npm run dev
The following are packaged in the same way as the second
Process less files
Use the npm command to install the three packages of style-loader, css-loader, less-loader and less (if you already have style-loader and css-loader, you don't have to install these two again)
npm install style-loader css-loader less-loader less --save--dev
Open the file and add the following less rules to the rules attribute array in the node module:
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } // deal with less Filed loader
Introduce files
import './css/';
Repack with webpack
npm run dev
Processing scss files
Use the npm command to install the four packages: style-loader, css-loader, sass-loader and node-sass in the project (if you already have style-loader and css-loader, you don't have to install these two again)
npm install style-loader css-loader sass-loader node-sass --save--dev
Open the file and add the following scss rules in the rules attribute array in the node module:
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // deal with less Filed loader
Introduce files
import './css/';
Repack with webpack
npm run dev
Process url address
For example, if you use background-image:url('...') in css style, webpack cannot handle url by default, so you also need to manually install a third-party loader.
Use the npm command to install the url-loader and file-loader packages locally
npm install url-loader file-loader --save--dev
Open the file and add the following rules to the rules attribute array in the node module:
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // Process the loader of the image path{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // deal with Font file loader
Repack with webpack
npm run dev
Handle ES6 high-level syntax
webpack can only handle part of ES6 syntax by default. For some more advanced ES6 syntax, webpack cannot handle it. The following code will report an error when packaged with webpack.
class Person {
static info = {name:'zlx',age:18}
};
();
webpack needs to use a third-party loader, which uses Babel here to convert the advanced ES6 syntax into a low-level syntax, and then package the results.
Use the npm command to install the following package:
npm i babel-core babel-loader babel-plugin-transform-runtime -D npm i babel-preset-env babel-preset-stage-0 -D
Open the file and add the following rules to the rules attribute array in the node module:
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // excludeIt's preventnode_modulesIn-housejsFiles are packaged
In the root directory of the project, create a new Babel configuration file called .babelrc. This configuration file belongs to the JSON format. Write the following code:
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
Repack with webpack
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.