An article on the record webpack initial installation and basic use herein, this is the record about how to use webpack to build a relatively complete, the base project
1. webpack of four core concepts
- Entrance (entry): Select the project to build the entrance module, he will build the entire project based on this document starting point.
- Output (output): Construction of the compiled file storage directory, the output of the project to build the specified folder.
- loader: js possible to handle non webpack type of file, and package build.
- Plugin (plugins): more powerful than the loader function, you can perform more complex operations.
2. Benpian target
Use webpack build a complete front-end project, the project includes js, html / css, image files. So that the project can be properly constructed and up and running on the built-dev server.
It needs to be done:
- Inlet configuration, input.
- Related: When it comes to, for example, on a production or development mode package, do not need to configure every time after adding parameters to the command.
- Configuration loader, so webpack can pack css, pictures and other files.
- Configuration plug-in, packaged html, extraction css.
- Run the project.
Note: all the commands are going to perform in the project root directory.
3. Start building project
3.1 basis for building
According to the first article of the method, we first created a basic project blog2:
src custom folder, create the following structure according to personal habits:
Preparing 3.2 Configuration
Under the root directory webpack.config.js new profile (package.json and similar), the contents of the configuration file base structure is as follows (the official configuration example for a large number of reference):
const path = require('path');
module.exports = {
};
Note: All subsequent steps will be arranged in the previous step up basic configuration increases, the current configuration would bold step, to ensure that the overall configuration can be seen in profile, to facilitate understanding.
4. Start the configuration management project webpack
4.1 inlet and outlet configuration
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/first-[hash].bundle.js'
}
};
entry: an inlet to configure the file path,
output：
path: the path and name of preservation of the resulting folder, here we use dist,
filename: the name of the file after packing (tape path may, for example, the example is packaged dist / js folder), using [hash] may be generated with the hash value of the name.
4.2 Configuration package mode
Previous article we said, webpack have development model and production environment, if not configured, will generate a warning, we previously used in order to carry the execution parameters, now we add it in the configuration file, so more convenience, the following configuration:
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/first-[hash].bundle.js'
},
mode: 'production'
};
mode: There are two parameters, the development model development, production model production
4.3 dev server configuration
We inlet, outlet configured after the fact will be able to run the package. But in the last article, we tested the completed package to build their own html and js is the introduction of testing, this is certainly not applicable to the development process. We can by means of webpack-dev-server to start local services, and debug code.
4.3.1 download and install
npm install webpack-dev-server -s
4.3.2 Configuration
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/first-[hash].bundle.js'
},
mode: 'production',
devServer: {
contentBase: './dist',
inline: true
}
};
devServer:
contentBase: need to run directory
inline: whether real-time updates
port: port number can be set
4.3.3 Simplified configuration
Normally we start the command is:
webpack-dev-server
Too much trouble, we can go in package.json configure the look:
In scripts this one, you can configure the command to be executed npm custom, and we stuck together:
"scripts": { "dev": "webpack-dev-server --open --inline" }
On behalf of --open automatically open the browser page refresh in real-time on behalf of --inline
Once configured, we console input:
npm run dev
You will be able to start the project, after the start, we actually open in the browser is a file directory, not a html page, because we are not currently packaged html file.
4.4 Configuration loader
If we need webpack packaged non-js file, we need to carry out installation configuration, including css, pictures and other files package. the type of loader is very much possible in the official website loaders module find loader for their own projects. Next we need to install the loader project:
4.4.1 download and install:
Mounting style-Loader css-Loader used to package style css
npm install style-loader css-loader -s
Install file-loader used to package files
npm install file-loader -s
Install html-withimg-loader used to pack the picture in the html
npm install html-withimg-loader -s
4.4.2 Configuration:
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/first-[hash].bundle.js'
},
mode: 'production',
devServer: {
contentBase: './dist',
inline: true
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(jpg|png|jpeg)$/, use: 'file-loader?limit=1024&name=./img/[name].[ext]' },
{ test: /\.html$/, use: 'html-withimg-loader' }
]
}
};
Note: When configuring, style-loader needs to be placed in front of, or will be error.
module：
rules：
test: file represents matching, support for regular expressions.
use: perform the corresponding Loader; following values can be parameters, and url Similarly, limit refers to the file size, name is a path setup file name, [name] original file name [EXT] original file extension.
4.5 Configuration Plug-plugins
We configured the front loader can make webpack package css, images, html content package configuration we now need.
We also need to create an index.html file in the src directory, as the entry page.
4.5.1 Download and install
Download and install html-webpack-plugin used to package html file
npm install html-webpack-plugin -s
Download and install extract-text-webpack-plugin package to split css, note: you need to install the latest version of @next
npm install extract-text-webpack-plugin@next -s
4.5.2 Configuration
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/first-[hash].bundle.js'
},
mode: 'production',
devServer: {
contentBase: './dist',
inline: true
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}],
publicPath: '../'
})
},
{
test: /\.(jpg|png|jpeg)$/,
use: 'file-loader?limit=1024&name=./img/[name].[ext]'
},
{
test: /\.html$/,
use: 'html-withimg-loader'
}
]
},
plugins: [
new new ExtractTextPlugin ( './ CSS / [name] .css' ),
new new HtmlWebpackPlugin ({
Template: './src/index.html' ,
filename: 'index.html' ,
Minify: {
// remove quotes
removeAttributeQuotes: to true ,
// remove Note
removeComments: to true ,
// remove empty attribute
removeEmptyAttributes: to true ,
// remove the transport space
collapseWhitespace: to true
}
})
]
};
First we need to require the introduction of plug-ins,
Css used with separate plug arrangement needs to fit loader
As ExtractTextPlugin.extract syntax
publicPath set the path load, adjusting the path of the project
plugins: plugins array
Create a new extract-text-webpack-plugin objects
Set extracted css location and name
Create a new html-webpack-plugin objects
template: Use the contents of the main html file
import '../css/index.css'
console.log('hello word');
src/css/index.css：
body{ background-color: aquamarine; } #div1{ width: 200px; height: 100px; background-image: url('../img/1.jpg'); }
src/img/1.jpg
src/index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>blog2</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> </head> <body> <div id="div1"></div> <div id="div2"> 第二个 div <img src="../src/img/1.jpg" alt="t1" width="300px"> </div> </body> </html>
After the start, the effect is as follows:
js, css, img can be loaded normally, indicating that the project has been built up, there is a need to download a small partner.
6. Summary
webpack function is very, very much, we learn that the best way is to look at the document. Of course, for me, the white, the document may look simply do not understand, but constantly trying to process, slowly began to realize the change of webpack clear up. I suggest that the new school students can also take a look at the example on the Internet, there is a general understanding, know what it is, what can be done, and after basic routines, then go to the document, it will be more handy.
So Benpian based webpack core concepts to build small projects have been completed, and the back might go learn some other framework or practice integration of the js.