Webpack4-02 - Configuration files, resource loaders (sass, file) - loader

In the previous section, we explained that zero configuration can also run the operation of packing JS, but in real projects, it is not just that simple packaging, you need to customize the import of packaging, output exit file.

The configuration file

To start our configuration file now, add the following directory:

  lesson-02
  |- node-modules
  |- package.json
  |- package-lock.json
  |- /src
    |- index.js
  |- index.html
+ |- webpack.config.js

Copy the code

webpack.config.js

const path = require('path')

module.exports = {
	mode: 'development'.entry: './src/index.js'.output: {
		filename: 'bundle.js'.path: path.resolve(__dirname, 'dist')}}Copy the code

In the above configuration, the mode option is our packaging mode, as discussed in the previous section.

An entry is a packaged entry file whose value is a path.

Output is the packaged output configuration item,

Filename is the final js filename to be output

Path is the directory to output to. Use the built-in core module path of Nodejs to set it to an absolute path.

package.json

{
  "name": "lesson-02"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "dev": "npx webpack --config webpack.config.js"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "webpack": "^ 4.30.0"."webpack-cli": "^ 3.3.0"}}Copy the code

New dev option in scripts option for commands run by NPM.

–config webpack.config.js

Is a parameter to set the Webpack configuration. This configuration file will be read when you run the webpack command.

Now we run the command as follows:

NPM Run Dev Version: webpack 4.30.0 Time: 153ms Built at: Configuration Information that Asset Size Chunks Names bundle.js 3.8 emitted by KiB main [emitted] main Entrypoint main = bundle.js [./src/index.js] 28 bytes {main} [built]Copy the code

The bundle.js file is generated in the dist directory, which corresponds to the configuration file of our configuration file.

Resource loaders

1. Load the CSS

Webpack to package CSS, you need the corresponding loader to package, otherwise an error will be reported, install the loader, as follows:

npm i style-loader css-loader -D
Copy the code

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js'.output: {
      filename: 'bundle.js'.path: path.resolve(__dirname, 'dist'+)}module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'+} +] +}};Copy the code

In the configuration file, the Module option has been added, and WebPack uses regular expressions to determine which files to look for and provide them to the specified Loader. In this case, all files ending in.css will be supplied to style-loader and CSS-loader.

Add style. CSS file under SRC as follows:

  lesson-02
  |- node-modules
  |- package.json
  |- package-lock.json
  |- /src
+   |- style.css
    |- index.js
  |- index.html
+ |- webpack.config.js

Copy the code

style.css

html.body{
	background: red;
}
Copy the code

Modified index. Js

import './style.css'

console.log('Hello World! ');
Copy the code

Run again:

NPM run dev > [email protected] dev C:\Users\Qin\Desktop\js-demo\webpack4-lesson\lesson-02 > npx webpack --config webpack.config.js Hash: c146e67d4287c2ce96f5 Version: Webpack 4.30.0 Time: 437ms Built at: Configuration Information even though this configuration is mandatory, Asset Size Chunks Names bundle.js 23.6 KiB main [emitted] main Entrypoint main = bundle.js [./node_modules/css-loader/dist/cjs.js! ./ SRC /style.css] 176 bytes {main} [built] [./ SRC /index.js] 52 bytes {main} [built] [./ SRC /style.css] 1.06 KiB {main} [built] + 3 hidden modulesCopy the code

After running, style.css will be packaged into bundle.js.

Open index.html in your browser and notice that the body background color has changed to red.

2. Load the sass/SCSS

With sass-Loader and Dart-sass, Dart-sass converts SASS/SCSS into CSS code that the browser can parse.

Installation:

npm i sass-loader dart-sass -D
Copy the code

Update: webpack. Config. Js

const path = require('path')

module.exports = {
	mode: 'development'.entry: './src/index.js'.output: {
		filename: 'bundle.js'.path: path.resolve(__dirname, 'dist')},module: {
    rules: [{test: /\.(css|scss|sass)$/.use: [+ {loader: 'style-loader'+ {},loader: 'css-loader' },
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('dart-sass') +} +}]}, {test: /\.(png|svg|jpg|gif)$/.loader: 'file-loader'.options: {
          name: '[path]/[name].[ext]',},}]}}Copy the code

The new index. SCSS

  lesson-02
  |- node-modules
  |- package.json
  |- package-lock.json
  |- /src
    |- style.css
+   |- index.scss
    |- index.js
  |- index.html
  |- webpack.config.js

Copy the code

index.scss

body {
	&{
		background-color: yellow;
	}
	#box {
		background-repeat: no-repeat; }}Copy the code

In index.js

import './style.css'
import './index.scss'

console.log('Hello World! ');
Copy the code

run

npm run dev
Copy the code

If successfully packaged, open index.html to see the styles in SCSS.

3. Load the image

Now we add the following styles to style.css:

style.css

html,body{ background: red; } + #box { + width: 200px; + height: 200px; + background-image: url(./F.png); +}Copy the code

Modified index. HTML


      
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Configuration files, resource loaders (loaders)</title>
</head>
<body>
+	<div id="box"></div>
	<script src="./dist/bundle.js"></script>
</body>
</html>
Copy the code

Run the command again:

NPM run dev > [email protected] dev C:\Users\Qin\Desktop\js-demo\webpack4-lesson\lesson-02 > npx webpack --config webpack.config.js Hash: 2adcd84d84a2ec8223c1 Version: Webpack 4.30.0 Time: 401ms Built at: Configuration Information even though this configuration is mandatory, Asset Size Chunks Names bundle.js 25.3 Emitted by KiB main [emitted by main Entrypoint main = bundle.js [./node_modules/css-loader/dist/cjs.js! ./src/style.css] 452 bytes {main} [built] [./src/F.png] 177 bytes {main} [built] [failed] [1 error] [./src/index.js] 52 Bytes {main} [built] [./ SRC /style.css] 1.06kib {main} [built] + 4 Hidden Modules ERRORin ./src/F.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/style.css (./node_modules/css-loader/dist/cjs.js!./src/style.css) 4:41-59
 @ ./src/style.css
 @ ./src/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] dev: `npx webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Qin\AppData\Roaming\npm-cache\_logs\2019-04-21T04_44_34_802Z-debug.log
Copy the code

Error found, error message: you may need the appropriate loader to handle this file type.

The image loader is missing. Now let’s install it.

The installation

The file-loader needs to be installed

npm i file-loader -D
Copy the code

Modify the webpack. Config. Js

  const path = require('path');

  module.exports = {
    entry: './src/index.js'.output: {
      filename: 'bundle.js'.path: path.resolve(__dirname, 'dist')},module: {
      rules: [{test: /\.css$/.use: [
            'style-loader'.'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         loader: 'file-loader',
+         options: {
+           name: '[path]/[name].[ext]', +} +}]}};Copy the code

Run the command:

NPM run dev > [email protected] dev C:\Users\Qin\Desktop\js-demo\webpack4-lesson\lesson-02
> npx webpack --config webpack.config.js

Hash: d33708d90a7ea8fc12B2 Version: Webpack 4.30.0 Time: 449MS Built at: 13:35:16 2019-04-21 Asset Size Chunks Chunk Names bundle. Js 25.2 KiB main [emitted] main SRC / / F.p ng 416 bytes (emitted) Entrypoint main = bundle.js [./node_modules/css-loader/dist/cjs.js! ./src/style.css] 452 bytes {main} [built] [./src/F.png] 56 bytes {main} [built] [./src/index.js] 52 bytes {main} [built] [./ SRC /style.css] 1.06kib {main} [built] + 4 hidden ModulesCopy the code

When it’s done, open index.html and see that the image has loaded successfully.

complete

For more resource loaders, you can click to view the official file

The project address

Source address click on this GitHub

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Webpack4-02 – Configuration files, resource loaders (sass, file) – loader

The configuration file

Resource loaders

1. Load the CSS

2. Load the sass/SCSS

3. Load the image

The installation

complete

The project address

Webpack4-02 – Configuration files, resource loaders (sass, file) – loader

The configuration file

Resource loaders

1. Load the CSS

2. Load the sass/SCSS

3. Load the image

The installation

complete

The project address

Related Posts

Optimize the React application with MOBx

Ali Front End Classics (written examination +3 rounds of technical examination +HR examination)

Summary of front-end Basic Knowledge