Lin Nerdy’s Webpack road – Basics
preface
You wish the world, I wish you no bugs. Hello everyone! I’m Lin Dull!
Let’s talk briefly about the cause and effect of the title, so that people don’t understand what “silly girl” is.
It happened in an article THAT I wrote earlier, “Reading The Question of the Triple JS Soul” summary:
And then… I’m at Lv4. I’m not trying to prove anything by Posting this article. I just want to say:
"You don't like my articles at all, you are greedy for my body!"
Designer, with some dog head memes.
OK
[Dog head] [Dog head] [Dog head]
So this time around, I’m a blogger who keeps my word.
(Note ⚠️ the following contents may cause discomfort, please watch with caution)
(I hope you don’t like this blogger popularity to corrupt the nuggets by hook or by crook, this act only as the raising of the level 4 after fans welfare spot of a smile, I more hope my article can get you like it. Thank you ~)
(For more “nerdy girl” emojis, you can follow the QR code at the end of this article and enter “Nerdy girl”.)
Webpack series introduction
This series documents my learning journey on Webpack. If you want to master Webpack as WELL as I do, I think it will be helpful for you, because the textbook is explained as a Webpack student, and the case demo is very detailed, involving:
- Foundation (This chapter)
- Construction Methods
- Optimize the article
- Loader article
- Configuration article
I suggest mark take some time to read it first.
(In fact, this series was written a long time ago, has not been sent out, at that time also wrote a long list of preface can move me, want to read nonsense can click here: GitHub address, but now let’s officially start learning)
All articles are webpack version number ^4.41.5, Webpack-CLI version number ^3.3.10.
In WebPack 3, WebPack itself and its CLI were in the same package, but in version 4, the two were separated, again to allow us to manage them better.
First, basic use
Let’s first look at one of the most basic ways to use WebPack.
The first thing you need to know is that WebPack, like other dependencies, includes both a local and a global installation, but I recommend using a local installation instead of a global installation.
Using a global installation will lock webpack in your project to the specified version and may cause a build failure in a project that uses a different version of WebPack.
So in the rest of the textbook, I will explain this by installing webPack locally.
GitHub address:LinDaiDai/webpack-basic)
1.1 Initializing the Project
First we create a directory and initialize NPM:
$ mkdir webpack-basic && cd webpack-basic
$ npm init -y
Copy the code(Initializing NPM with -y will help us generate a default package.json configuration.)
1.2 Installing the WebPack locally
As mentioned earlier, the webPack version used in this article is >4.0. Since WebPack and Webpack-CLI have been separated, we need to install them separately (if you are using webpack version less than 4.0, only need to install WebPack).
Execute commands in the webpack-basic root directory:
$ npm install webpack webpack-cli --save-dev
Copy the codeIn package.json, you’ll notice that the WebPack and WebPack-CLI dependencies you just installed are added to the devDependencies section.
1.3 Creating the Bundle File
With that done, let’s write a simple page to see what it looks like.
-
Start by creating a SRC folder in the root directory and creating an index.js file in it
-
Create a dist folder in the root directory and create an index.html file in it
After that, the project structure looks like this:
webpack-basic
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
Copy the codeLet’s add something to it:
// src/index.js
function component() {
var element = document.createElement('div');
element.innerHTML = "Hello Webpack";
return element;
}
document.body.appendChild(component());
Copy the code<! --dist/index.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack start</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
Copy the codeIndex.js is easy to understand, but you may notice that index.html introduces a main.js file, but we don’t see where it is.
Don’t worry, the main.js file here is the one we’re going to produce after webpack, but in this case we’ve imported it in advance.
1.4 Performing WebPack Packaging
After writing the above code, we can use this command in the root directory to package:
$ npx webpack
Copy the codeYou’ll see an extra main.js file in the dist folder, and when you open index.html, you’ll see “Hello Webpack” on the page.
You might be a little confused about how it can generate main.js when we haven’t configured anything.
In cases like this where WebPack 4 doesn’t have any WebPack configuration, WebPack will provide you with a default configuration.
- will
src/index.jsAs a starting point for entry (i.eentryOption) - will
dist/main.jsAs output (i.eoutputOption)
In the words of the official website:
Executing NPX webpack will take our script as the entry point and output it as main.js.
Node8.2 + provides the NPX command, which can run in the webpack binary (./node_modules/.bin/webpack) of the originally installed webpack package.
2. Use configuration files
From the example above at 👆, webpack4 provides you with a default configuration if you don’t have any configuration files.
In Webpack 3, however, this is not allowed and you must have a webpack.config.js file to specify the entry/exit.
However, if you are developing with Webpack4, in practice you will still need a webpack.config.js file to do some complicated setup.
2.1 webpack. Config. Js
Let’s create a file called webpack.config.js in the root directory of the project and write some basic configuration in it:
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js'.output: {
filename: 'bundle.js'.path: path.resolve(__dirname, 'dist')}}Copy the codeNow let’s reuse the command to build:
$ npx webpack --config webpack.config.js
Hash: dabab1bac2b940c1462b
Version: webpack 4.01.
Time: 328ms
Built at: 20182 -26 - 22:47:43
Asset Size Chunks Chunk Names
bundle.js 69.6 KiB 0 [emitted] main
Entrypoint main = bundle.js
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] ./src/index.js 256 bytes {0} [built]
+ 1 hidden module
WARNING inConfiguration (Configuration warning) The'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. Set the 'mode' option to 'development' or 'production' to enable environment defaults.)Copy the codeAs you can see, this time it also completes the build successfully, but we have a bit more than the previous statement:
--config webpack.config.js
Copy the codeThis command is used to specify which configuration file to build from, such as webpack.config.js.
You don’t have to use this statement here, though, because the webpack command uses it by default.
However, if your configuration file is not called webapck.config.js, but, for example, webpack.other.config.js, you have to specify it.
Now, webpack has an entry of SRC /index.js and an exit file of dist/bundle.js, depending on your configuration.
We also need to rework the dist/index.html introduction:
<script src="bundle.js"></script>
Copy the codeThis configuration file provides flexibility and allows you to specify Loader rules, plugins, resolve options, and many other enhancements.
2.2 NPM script
Above 👆, we use CLI mode like NPX webpack to run local webpack:
$ npx webpack
Copy the codeThis is actually not very convenient, so we can set up a shortcut. Add an NPM script to package.json:
{" name ":" webpack - basic ", "version" : "1.0.0", "description" : ""," private ": true," scripts ": {" test", "echo \" Error: no test specified\" && exit 1",+ "build": "webpack"}, "keywords" : [], "author" : ""," license ":" ISC ", "devDependencies" : {" webpack ":" ^ 4.41.5 ", "webpack - cli" : "^ 3.3.10"}, "dependencies" : {" lodash ":" ^ 4.17.15 "}}Copy the codeA new configuration “build: “webpack” was added to scripts.
Now, we can use the NPM run build command instead of the NPX command we used earlier.
$ npm run build
Copy the codeThe command tool now produces the same results as described above at 👆.
Manage resources
Let’s review the project catalog explained at 👆 above:
webpack-basic
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
Copy the codeAs you can see, the above example only allows us to build with JS files, but in real development, we can’t just use JS files. What if we want to use CSS, images, fonts, etc?
Don’t worry, one of the best features of WebPack is that you can import any type of file from the Loader in addition to JavaScript.
3.1 load CSS
First, let’s look at loader by loading CSS files.
Style – loader and CSS – loader
To import a CSS file from a JS module, say you want to import a CSS file from index.js:
// index.js
import './style.css'
// Require ()
const style = require('./style.css')
Copy the codeYou need to install and add the two Loaders in your project (module configuration) :
- style-loader
- css-loader
$ npm i --save-dev style-loader css-loader
Copy the codeAnd configure it in 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 codeWe added a module configuration to webpack.config.js.
The configuration here means:
Webpack determines which files to look for based on regular expressions and feeds them to the specified loader. /\.css$/ this re means that all files in the matching directory ending in.css will be supplied to style-loader and CSS-loader.
(the $must end with something)
Note ⚠ ️ :
Style-loader must be placed in front of CSS-loader, otherwise an error will be reported during packaging.
This is because loader is executed from right to left and from bottom to top. Webpack must parse all CSS module dependencies to get the calculation result before creating the style tag. Therefore, style-loader should be placed before CSS-loader.
Introduce CSS in JS
We are now ready to use CSS in our project, and you can introduce it in JS.
Let’s create a style. CSS file in the SRC folder and add some content:
.color_red {
color: red;
}
Copy the codeThen modify our SRC /index.js file and add a class name to Element:
import './style.css' Import the CSS file
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello'.'webpack'].' ');
element.classList.add('color_red') // 2. Add the class name
return element;
}
document.body.appendChild(component());
Copy the codeBuild again with the command statement:
$ npm run build
Copy the codeWhen you open the page, the “Hello Webpack” on the page turns red, indicating that CSS has been successfully introduced.
The way it works here is that when the module runs, tags containing CSS strings will be inserted into the HEAD of the HTML file.
So if we check the page (i.e. open the console), and then in Elements you’ll see a style tag in the head, which is where you define your CSS.
What is the effect of using CSS-Loader alone?
Although above 👆 we introduce to want to use CSS in the page need to use style-loader and CSS -loader these two loaders, so what are their separate functions?
Now let’s modify the webpack.config.js configuration to remove style-loader:
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 codeAnd print out the style introduced in index.js:
// src/index.js
const style = require('./style.css')
console.log('style', style)
Copy the codeEffect:
It can be found that csS-loader can actually identify the imported CSS module and convert the content through specific grammar rules.
But what we get here is an array, which is not what we want, and the page can’t use it. Therefore, it is necessary to cooperate with style-loader to play its real role.
Style – the role of the loader
Style-loader creates a style tag from a JS script, which contains some styles. And it can’t be used on its own, because it’s not responsible for resolving CSS dependencies.
In other words:
- Used alone
css-loaderJust make sure we can quote itcssThe module comes in, but it has no effect - while
style-loaderI can create onestyleTag, and bring it incssStyles are all tucked into this tag
One thing to note, however, is that we have introduced several CSS modules in the js of the current project, which will generate several style tags.
For example, now I create a new style2.css file in my project and add some styles:
.color_red {
font-size: 20px;
color: green;
}
Copy the codeThen import both CSS files in SRC /index.js:
import './style.css'
import './style2.css'
Copy the code(Remember to add style-loader in webpack.config.js)
NPM run build now, and open the page:
Now you can see that Lin Gawk has turned green. (Choose to forgive her, of course…)
It is true that two style tags are generated in the page, and the rules for displaying styles are also from the back over the front (style2.css was introduced later than style.css).
3.2 Loading Images
Now that we’ve seen how to load CSS, what about images in your project?
file-loader
Using file-loader allows us to import static resources in js and CSS. Again, you need to install and configure it first:
$ npm i --save-dev file-loader
Copy the codeConfiguration 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)$/.use: [
'file-loader'}]}}Copy the codeAs you can see, I added a new configuration to the original Rules array. Now that I have the csS-Loader base, I’m sure you’ll get the idea soon.
Introduce images in JS/CSS
Next, let’s take a look at the effects of using images in your project.
First I put an image in the SRC directory: icon.png.
Then introduce it in index.js and style.css respectively:
// index.js
import './style.css'
import Icon from './icon.png' // 1
function component() {
var element = document.createElement('div');
element.innerHTML = 'Lin Dull';
element.classList.add('color_red')
var img = new Image(200.200); // 2
img.src = Icon;
element.appendChild(img);
return element;
}
document.body.appendChild(component()); Copy the code/* style.css */
.color_red {
color: red;
background: url('./icon.png');
height: 300px;
}
Copy the codeRepackage it, then look at the page and see that the image is referenced in both places.
If you are careful, you may find a PNG file named after the MD5 hash value in the packaged dist folder:
webpack-basic
|- /dist
|- 182ba2a0f5c9507387abe2ad84c23e6b.png
|- bundle.js
|- index.html
Copy the codeYes, when you import this image in your JS or CSS, it will be processed and added to the output directory.
Interestingly, if you remove references to icon.png in index.js and style.css, you won’t have the image in the dist folder after webpack.
Other optional parameters of file-loader
Above 👆 we simply use file-loader:
rules: [
{
test: /\.(png|svg|jpg|gif)$/.use: ["file-loader"],},],Copy the codeIn fact, file-loader has many other parameters.
For example, specify the naming convention of the file after packaging, the directory to store after packaging, and so on.
These configuration rules can be placed in the options object:
rules: [
{
test: /\.(png|svg|jpg|gif)$/.use: [{loader: "file-loader".options: {},},],Copy the codeOptions include name, context, publicPath, and outputPath. For details, see file-loader
To demonstrate this, store the packaged image in a folder called “images” and give it its original name:
rules: [
{
test: /\.(png|svg|jpg|gif)$/.use: [{loader: "file-loader".options: {
name: "[name].[ext]".outputPath: "images/",},},],},Copy the codeAt this point, the packaged directory structure becomes:
webpack-basic
|- /dist
|- /images
|- icon.png
|- bundle.js
|- index.html
Copy the code[name] indicates the original name of the file, [ext] indicates the original type of the file, [hash] indicates the hash name, and [path] indicates the path of the resource relative to the context.
(Context defaults to webpack.config.js)
3.3 Loading fonts
Above 👆 we have learned how to load images, how about loading fonts?
Fonts are also resources, so they are loaded in the same way as images, using file-loader.
The configuration in Webpack requires you to do something with the following font suffixes:
webpack.config.js
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/.use: ["file-loader"],},]Copy the codeOK, let’s reference fonts in the project, create a new fonts folder under SRC/and add two font files. Now the project directory becomes:
(I downloaded these two font files from Iconfont’s online font.)
webpack-basic
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- fonts
+ |- webfont.woff
+ |- webfont.woff2
|- icon.png
|- index.js
Copy the codeReference it in CSS:
@font-face {
font-family: 'MyFont';
src: url('./fonts/webfont.woff2') format('woff2'), url('./fonts/webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
}
.color_red {
color: red;
font-family: 'MyFont';
background: url('./icon.png');
}
Copy the codeThen change the word in SRC /index.js:
// src/index.js
function createElement () {
element.innerHTML = 'Confucius said: if you don't sleep at noon, you collapse in the afternoon! Mencius said, Confucius is right! ';
}
Copy the code(Note that in this case I took a break and wrote it directly online using Iconfont, which is specific to “Confucius said: If you don’t sleep at noon, you crash in the afternoon! Mencius said, Confucius is right! These words work, but not any other words, which you can’t do in practice.)
After repackaging, open the page and you can see the fonts you just introduced.
Like an image, it will not be printed to output if no font is used.
3.4 Loading XML or CSV Data
In addition to the CSS, images, and fonts described above, the available resources that can be loaded can also be data, such as JSON, CSV, TSV, and XML.
- Built-in support
JSONFile, for exampleimport Data from './data.json'The default is normal CSV and TSVFile needs to be usedcsv-loaderXMLFile needs to be usedxml-loader
So if you want to use it, install:
$ npm i --save-dev csv-loader xml-loader
Copy the codeThen configure it in webpack.config.js:
rules: [
{
test: /\.(csv|tsv)$/.use: ["csv-loader"],}, {test: /\.xml$/.use: ["xml-loader"],},],Copy the codeNow you can reference the XML file directly in your project:
import Data from './data.xml'
Copy the code3.5 Loading TXT Data
Loading. TXT text data depends on raw-loader.
$ npm i --save-dev raw-loader
Copy the codeThen configure:
rules: [
{
test: /\.(csv|tsv)$/.use: ["csv-loader"],}, {test: /\.txt$/.use: "raw-loader"],},Copy the codeTo retrieve its contents, refer to the.txt file:
import txt from './assets/file.txt'
export function print() {
console.log(txt) // I am a piece of text to test raw-loader
}
Copy the codeIf you use file-loader to process TXT files, it will compress the TXT files into the bundle, and only the file path can be retrieved:
import txt from './assets/file.txt'
export function print() {
console.log(txt) // 1474623111aaae6b31c08e1fedda68a3.txt
}
Copy the code4. Manage output
4.1 Multiple INPUTS/outputs
In the 👆 example above, we have only one input SRC /index.js and one output dist/bundle.js.
In fact, entry and output support you have multiple input, output.
I re-created a project called webpack-html, and just introduced webPack and webpack-CLI as configured
Then create index.js and print.js under SRC:
src/print.js:
export default function printMe() {
console.log("I' m printMe");
}
Copy the codesrc/index.js:
import printMe from './print.js';
function component() {
var element = document.createElement('div');
element.innerHTML = 'Hello Webpack';
var btn = document.createElement('button');
btn.innerHTML = 'Click me';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
Copy the codeThe project structure is as follows:
webpack-html
|- package.json
|- webpack.config.js
|- /src
|- index.js
|- print.js
Copy the codeThen configure the webpack.config.js file:
const path = require('path')
module.exports = {
entry: {
app: './src/index.js'.print: './src/print.js'
},
output: {
filename: '[name].bundle.js'.path: path.resolve(__dirname, 'dist')}}Copy the codeAt this point, I have configured two inputs index.js and print.js.
For output, I use the form [name].bundle.js, which generates the following file format after packaging:
/dist
|- app.bundle.js
|- print.bundle.js
Copy the codeIn dist you have app.bundle.js and print.bundle.js.
[name] corresponds to entery.
Now let’s create a new index.html file in the dist folder and import the two js files we just generated:
dist/index.html:
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Output Management</title>
</head>
<body>
<script src="app.bundle.js"></script>
<script src="print.bundle.js"></script></body>
</html>
Copy the codeThen let’s open up the HTML and see what it looks like. It shows “Hello Webpack” and console.log when the button is clicked.
It proves that the two JS files just output are introduced without problems.
4.2 set HtmlWebpackPlugin
In all of the above 👆 cases, we manually created an index. HTML file and then imported the output JS file into the HTML.
There is a plugin that saves us from this step: the HTML-webpack-plugin
The basic use
First let’s install it:
$ npm i --save-dev html-webpack-plugin
Copy the codeThen readjust webpack.config.js:
const path = require('path')
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Webpack Output Management'
+})
+],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
Copy the codeNow let’s delete the index.html we created manually and run NPM run build.
OK👌, which now automatically generates index.html in the dist folder and imports all the output js for us:
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Output Management</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script>
<script type="text/javascript" src="print.bundle.js"></script></body>
</html>
Copy the codeOther Configuration Items
In HtmlWebpackPlugin, there are many other options besides the title(the title of the index.html generated by the configuration) configuration item.
Such as:
- Filename {String} The default is
index.htmlThis is what you specify you generateindex.htmlPath and name of - Template {String} defaults to “”, sometimes you want to write your own generated ones
index.htmlFile, which specifies the path to your template. - Favion {String} specifies that you generate
index.htmlOf course if you use the icontemplateThis property can also be omitted
Here I’ll demonstrate what happens with filename and template 😊.
First I created a new index.html file under SRC to write the template:
src/index.html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>
<% = htmlWebpackPlugin.options.title% >
</title>
</head>
<body></body>
</html>
Copy the codeThen modify webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
app: "./src/index.js",
print: "./src/print.js",
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Output Management",
+ filename: "admin.html",
+ template: "src/index.html",
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
Copy the codeNow after executing the packaging instructions, the generated dist file directory will become:
/dist
+ |- admin.html
|- app.bundle.js
|- print.bundle.js
- |- index.html
Copy the code4.3 Clearing the /dist folder
We generate the Dist folder after each build, but it will not be automatically cleaned up if there are legacy files.
The current recommendation is to clean the /dist folder before each build, and the clean-webpack-plugin is used to do just that.
$ npm i --save-dev clean-webpack-plugin
Copy the codeThen configure it in webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
+ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: {
app: "./src/index.js",
print: "./src/print.js",
},
plugins: [
+ new CleanWebpackPlugin({
+ cleanAfterEveryBuildPatterns: [" dist "], / / this is mandatory
+}).
new HtmlWebpackPlugin({
title: "Webpack Output Management",
filename: "assets/admin.html",
template: "src/index.html",
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
Copy the codeIf you install according to the official website:
const CleanWebpackPlugin = require('clean-webpack-plugin'); . new CleanWebpackPlugin(['dist'])
Copy the codeThen you’ll get an error when packing:
TypeError: CleanWebpackPlugin is not a constructor
Copy the codeI have found out why. If you have installed the clean-Webpack-plugin above 3.0, You have to do what I did with const {CleanWebpackPlugin} = require(‘ cleanwebpack-plugin ‘).
And configuration to clean up the folder will use cleanAfterEveryBuildPatterns to define.
After the language
You wish the world, I wish you no bugs. So much for this article.
"This is not me. This is not me. This is not me."
If you also like silly girl, please pay attention to LinDaiDai’s public account or scan the following TWO-DIMENSIONAL code 👇👇👇 bar 😊.
I will update some front-end knowledge content and my original article 🎉 from time to time
Your encouragement is the main motivation for my continuous creation 😊.
Related recommendations:
The most detailed BPMN.js textbook in the whole Web
If you don’t understand Babel, I’ll send you a mask.
“[Suggested stars] To come to 45 Promise interview questions a cool end (1.1W words carefully arranged)”
“[suggestion 👍] 40 more this interview questions sour cool continue (1.2W word by hand)”
“[why not three even] more simple than inheritance of JS inheritance – packaging (small test)”
【 Why not three times 】 finish these 48 questions to thoroughly understand JS inheritance (1.7W words including hot finishing – back to nature)
Data type conversion from 206 console.log()
This article is formatted using MDNICE