- Installation webpack
- webpack core concept: an inlet, an output, loader, plug-in module, the mode
First, install webpack
1. The need to install before installing webpack nodejs environment, download using nodejs environment that comes with the package management tools npm, because the network environment, it is recommended to install the installation image cnpm Taobao to achieve download.
npm install webpack -g
Since webpack upgrade from version 3 to version 4, split the command line interface webpack-cli, so this time you will complain directly webpack, also need to download and install a webpack-cli, re-use webpack.
npm install webpack-cli -g
Then you can start your work again using webpack the interval, to note that there must be the src folder within your range of tools, and there is a index.js file in the file below, this is not configured for the test case, God has arranged a large skip.
webpack
After packaged by webpack generated in a tool folder dist section, and has a main.js folder, the packaged main.js webpack generated by introducing the main.js test your code in the HTML file structure .
2. webpack default ES6 support modularity and Commonjs modular, and can use a mix. Look at the following example demonstrates the same time :( designated by webpack packed files and specify the package to a file)
Use of modular define a sum.js ES6
export default function sum(a,b){ return a + b; }
Use Commonjs modular define a minus.js
module.exports = function(a,b){ return a - b; }
Introducing both modules demo.js main entrance file, and use the function module:
import sum from './sum'; var minus = require('./minus'); console.log(sum(2,4),minus(4,2));
Then webpack the demo.js packaged bundle.js file:
webpack demo.js -o bundle.js
Reintroduction bundle.js demo.html file structure in the packaged file.
<script src="./bundle.js"></script>
Demo.html open the file, view the console, the operation is successful, then prints out: 62
3. In order to more easily manage the project, in addition to installing webpack Global necessary to install a local webpack in the working range of the current project, one possible version of the global webpack may differ from the global version, but can be better management plug-ins.
// download and install local webpack ---- (- save-dev can be abbreviated as -D) CNPM WebPACK --save the install-dev
After downloading the installation is complete you can see in the work area generates a node_modules folder, and generate a package.json file. node_nodules folder inside webpack dependent packages, package.json is the record of the current workspace what packages are installed, the first installation in this file only records the information webpack, such as:
{ "devDependencies": { "webpack": "^4.35.0" } }
For example, to install a jquery on the current workspace:
cnpm install jquery -D
package.json recording a plurality of an information jquery actual jquery packet is stored into the folder node_modules:
{ "devDependencies": { "jquery": "^3.4.1", "webpack": "^4.35.0" } }
This package.json document what effect? In addition to viewing the project depends on the package outside, and when you want to migrate your workspace to a colleague or a copy of the ongoing development and maintenance projects, the package does not need to copy node_modules to him, just to the package.json file copy can, get this package.json after performing the following instructions on the new workspace, you package.json file records all the dependencies can be downloaded to the front of the current work interval:
npm install
Two, webpack core concepts
- Entrance (entry)
- Output (output)
- Loader (loader)
- Plugin (plugins)
- Mode (mode)
- Module
First, in the work area to create a suffix .config.js profile, this profile is used to configure an inlet, an output, loader, plug, block, mode. This means that tells the configuration file webpack start packing operation from that file, that file package to operate, how to compile a non-JS file transcoding, etc., packaged module operates according to information on the configuration of the modules need to rely encountered when packaged JS file , or is packaged in accordance with the mode of production in accordance with the development model. This configuration file automatically for you to complete these operations. Note .config.js configuration file follows Commonjs specification.
2.1.1 config.js arranged in a single configuration file entry file: entry attributes defined in the configuration module, and the file path of incoming string inlet manner, It should be noted that the file extension.
module.exports = { entry:'./src/index.js' }
2.1.2 config.js arranged in a plurality of configuration file entry file: entry attributes have to be written at this time the value of the object, and defines a file entry for each name as a property name, and the file entry corresponding to the path as an attribute value to the attribute.
1 module.exports = { 2 entry:{ 3 index:'./src/index.js', 4 app:'./src/app.js' 5 } 6 }
2.2.1 disposed config.js output information: the output attribute is defined in the configuration module, and to assign a property of the object, the object has two attributes are the path and filename, the file path used to set the output path, with the filename to set the file name.
var path = require('path'); module.exports = { output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' } }
Note that the path attribute configuration, path.resolve (__ dirname, 'dist') is to find the meaning in the path of this variable 'dist' folder, there is no 'dist' folder If the current folder is automatically created in the current path 'dist' folder. path environment itself is a node module, so it is necessary to introduce this module and then call resolve path of () method to get the current module specified folder, this method returns the absolute path of the folder. Webpack used to operate the output file.
So, this means that the output will be packaged files stored in the file under the current working environment dist folder, and set the packaged file name bundle.js.
Configuration Mode 2.2.2 With the entry of the file, the output will inevitably require multiple package files for multiple entry that corresponds to the output file, the file name certainly can not write as above death, to see an example of how to solve:
1 var path = require('path'); 2 module.exports = { 3 output:{ 4 path:path.resolve(__dirname,'dist'), 5 filename:'[name].bundle.js' 6 } 7 }
In the fixed file name with a front block [name], is set to a dynamic name, then this is the path name of the corresponding property entry file name.
We know, less is not directly on the HTML file in webpack packaging process can be loaded directly converts into less css files, or even direct conversion between compile trip style, this time on the need to use the loader. Of course, the loader not only to achieve less conversion, can handle all kinds of files can not be directly used by the browser file formats, such as TypeScript.
First to understand the loader file by converting less:
1 module.exports = { 2 module:{ 3 rules:[ 4 {test: /\.less$/,use:['style-loader','css-loader','less-loader']} 5 ] 6 } 7 }
Add object property module in the configuration file, and then add the object properties in the rules module, and then the various documents to parse the file format and parsing loader in the manner of a key-value added. File type is represented by test, then the regular expression to match the way the file extension as a test value; use are required to represent the loader, the loader may be the value of a string (execute single loader), may be It is an array (a plurality of iterations loading loading), loading a plurality of iterations loaded manner is loaded from the iterative forward.
Note that the loader is to download, and then they would go in the main entrance file using a modular rely on the corresponding file, or webpack no way to track the corresponding file.
cnpm install style-loader less-loader css-loader less --save-dev
Dependent files corresponding entry in the main file:
import './src/demo.less';
About Plug-ins This section is unlikely to explain here, it can be understood as extensions of webpack. In fact webpack comes loader loader system is built on the basis of the above plugins, since it is outside of the extension it must first introduced, and then the configuration in the configuration. In fact it is like this, we expand through a html-webpack-plugin plug-in to demonstrate the following, where no specific description of the purpose of this plug-in, there will be specific analysis plug-in to resolve behind blog:
var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin() ] }
Then again I execute webpack package, if the normal complete package, then there will be an index.html file in the dist folder, but I made a small error in the following packaging components:
Error: Can not find module 'webpack / lib / node / NodeTemplatePlugin'
specific here not explain the reason for the error, and I execute this command line to resolve this error in the console:
npm link webpack --save-dev
With cnpm is also possible, and then perform well packaged again, dist folder appears the index.html file.
2.5.1 mode is used to control the mode of packing, packing mode is often referred to the so-called production model and development model, is the difference between the two modes of production is a compressed version of the code, the test is not convenient, because if you use the code compression test, and if in the first row are being given abnormal situation, inconvenient to debug. If not set in webpack mode will default to the production mode, the code package is compressed.
= module.exports { MODE: 'Production' // producing mode MODE: 'Development' // Development Mode }
The two codes you do not have a copy, I was set up in order to show the way these two modes of the two patterns are written to an example. In the actual development we usually need two configuration files, one for the development package, a package for the production, using the specified configuration file is packaged in the implementation of packaged console.