Reload and compile. This essentially means compiling syntax that the browser does not recognize into syntax that the browser recognizes. For example, compiling less into css, ES6 syntax into ES5, and so on.
Reduce IO requests. Usually, after making a request, we will return an HTML to the browser. At this point, if we open the console, we will find that the browser makes another request to fetch the static resources referenced by tags such as script and link in the HTML page. However, webpack's packaging combines all the static resources, reducing IO requests.
# Install webpack
npm install --save-dev webpack
# Install webpack-cli dependency
npm install --save-dev webpack-cli
# Create a new project
mkdir demo
# cd into the project
cd demo
# Initialize
npm init -y
# Install the development version of cli
npm install webpack webpack-cli --save-dev
Create a new html file and a js file, the project directory is as follows
demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js:
function component() {
var element = document.createElement('div');
// Lodash (currently imported via a script) is necessary for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html:
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
In package.json:
Delete "main": "index.js", add "private": true
Adjust the project directory:
demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
To package the lodash dependency in index.js, we need to install and add the library locally. Enter the following command in the terminal:
npm install --save lodash
Then adjust the content of index.js
// Add one line of code
import _ from 'lodash';
In dist/index.html, the imported external file lodash can be removed
Remove <script src="./src/index.js"></script>
Add <script src="main.js"></script>
Run the terminal command:
npx webpack
This will package and generate the required main.js file in dist
You can also manually configure the file by creating a webpack.config.js file in the root directory
const path = require('path');
module.exports = {
// This is where the files to be packaged are placed. If there are multiple files, write them in array format
entry: './src/index.js',
output: {
// This is the name of the generated file, and it can be manually modified
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Considering that running webpack locally using CLI is not very convenient, we can set up a shortcut,
Add the following to "scripts" in package.json
"build": "webpack"
This way, you can use the npm run build command instead of the previous npx command
Delete the js files in the previous dist folder, and then package again
npm run build
Take a look at the project directory
demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules
No problem, the packaging is successful, and the browser displays normally
In the js file, import a css file, and you need to install and add style-loader and css-loader in the configuration
npm install --save-dev style-loader css-loader
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// Added content
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
Then in the js module:
import './style.css'
npm run build will automatically resolve and package
Load images
Download and install file-loader
npm install --save-dev file-loader
webpack.config.js:
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
Load fonts
Load data resources
In addition, useful resources that can be loaded include data, json files, CSV, TSV, XML, etc. In fact, json is built-in and can be directly imported using import data from './data.json'
But CSV, TSV, XML cannot be directly imported, and some dependencies need to be configured
Download and install in the terminal:
npm install --save-dev csv-loader xml-loader
webpack.config.js:
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
Add a json file data.json in the src directory
Then import it in index.js:
import data from './data.json'