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 codewebpack.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 codeIn 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 codeNew 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 codeThe 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 codewebpack.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 codeIn 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 codestyle.css
html.body{
background: red;
}
Copy the codeModified index. Js
import './style.css'
console.log('Hello World! ');
Copy the codeRun 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 codeAfter 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 codeUpdate: 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 codeThe 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 codeindex.scss
body {
&{
background-color: yellow;
}
#box {
background-repeat: no-repeat; }}Copy the codeIn index.js
import './style.css'
import './index.scss'
console.log('Hello World! ');
Copy the coderun
npm run dev
Copy the codeIf 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 codeModified 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 codeRun 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 codeError 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 codeModify 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 codeRun 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 codeWhen 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