A, webpack basis:
The first brother blog, merely to record their learning experiences, easy to read their future. The text of the picture I think that's very good, is copied from another article over, forget to explain the image source URL, sorry. Expressed herein inaccurate, wrong place, please leave comments directly criticize, I would seriously revise, thanks!
1, outline:
Definition of A, webpack of
B, 6 core concepts:
entry: entry file (you have to pack, pack what you tell me, can be a single entry file, array, object identity). Webpack start indicator entry which the module should be used, which is constructed as an internal dependency graph begins. After the entrance to the starting point, webpack will find out which modules and libraries are the starting point of entry (direct and indirect) dependent.
output: export documents (I finished packing, where you put). output attribute tells webpack output where bundles it created, and how to name the files, the default value ./dist. Basically, the entire application structure, will be compiled into a file you specify the output path folder. You can specify an output field in the configuration, to configure these processes.
module: module (put lorder, the compiler does not know what a browser). loader make webpack able to deal with those non-JavaScript files (webpack itself only understand JavaScript). loader can convert all types of files is valid module webpack can handle, then you can use packaged ability webpack, and to process them.
plugins: plugin (supporting development and improve development efficiency). The loader is used to convert certain types of blocks, which plug can be used to perform a wider range of tasks. Range of plug-ins include, from packaging optimization and compression, all the way to redefine the environment variable. Plug-in interface is extremely powerful, can be used to handle a variety of tasks.
devServer: Server (local server webpack provided)
mode: mode is divided into development mode (development), production mode (production), webpack4.x new version added. By selecting a development or in the production, to set the mode parameter, you can enable webpack under the corresponding mode built-in optimization.
Simple to use C, Vue official website Vue-Cli scaffolding
2, webpack: webpack can be seen as modules baler : It do is to analyze your project structure, expand the language JavaScript module and find some other browser can not run directly (Scss, TypeScript, etc.), and converting and packaging for the browser to use an appropriate format. webpack is a modern JavaScript applications Static Module packer, is a build tool. When webpack processing applications, it recursively construct a dependency graph, wherein each module comprises application desired, all of these modules are then packaged into one or more of the bundle. webpack official website is https://webpack.github.io/ , the document addresses are https://webpack.github.io/docs , the official website of the definition of webpack is MODULE BUNDLER, translation is: module baler.
Webpack works is: put your project as a whole, by a given master file (such as: index.js), Webpack from the beginning of the file to find all dependent files to your project, use the loaders to handle them, and finally packaged as one (or more) browser recognizes JavaScript file. See below:
Recommended Learning Address: https://www.cnblogs.com/BetterMan-/p/9867642.html , http://webpack.wuhaolin.cn/ , https://segmentfault.com/a/1190000006178770 , HTTPS: // segmentfault.com/a/1190000020403955 , https://www.cnblogs.com/ghostwu/p/7499237.html
3, webpack4.x installation (global installation and local installation) with the uninstall command :( premise: Because webpack is based on node.js, first go to the official website node.js install the latest version):
A, installation command:
Global Installation: npm install webpack webpack-cli --save-dev -g
Mounted locally (in the documents folder, cmd command execution): npm install webpack webpack-cli --save-dev or npm install webpack webpack-cli --save-dev -s
B, uninstall command:
Global uninstall: npm uninstall webpack webpack-cli -g
Partial unloading (in the documents folder, cmd execute the command line): npm uninstall webpack webpack-cli
C, Description: -g: represents the global installation, -s or without: the local representative of the installation, the installation is complete, can view the version: webpack -v; - save-dev: package.json mounted in the development environment devDependencies, - -save: package.json installed in a production environment: dependencies.
4, npm global and local mounting installation distinction:
A, Global Installation: Installation is often a global install a tool, he is not installed in a folder, but installed in a global environment, such as my current installation path is: C: \ Users \ xhxy \ AppData \ Roaming \ npm, it can be seen that there webpack, webpack-cli, as shown below:
B, a partial installation: the project is in need thereof, is mounted to the ./node_modules file, you can see that there are webpack, webpack-cli, as shown below:
5, the start of webpack trip:
A, the traditional way:
problem:
When the browser is loaded, it will first load the html file, and then based on HTML tags inside the script in order to load each js file. For each such js file, the browser sends a request to the server. If the number of files that introduced a lot, so will the number of requests sent
Too much, cause some pressure on the server. Moreover, a single file may not be large, the browser on each request needs to establish a link with respect to the cost of broken links is very worthwhile. To solve this problem, we need to pack, to package multiple files into a single js.
Js code different script tag introduced, will pollute the global scope, such as a.jsthe declaration of a mounted directly on to the window, other documents if we declare a variable, there will be conflict.
B, webpack command:
- npm init and npm init -y (-y lets you omit to stop yes)
- npm install webpack webpack-cli --save-dev
- New Folder src, dist, New main.js in the root directory (as the entry file), the new a.js, b.js src directory file.
- Installation loader:
npm install css-loader style-loader --save-dev (style conversion process loader)
npm (loader converted file pictures, videos, etc.) install url-loader file-loader --save-dev
- Install plugin:
npm install html-webpack-plugin --save-dev (plug-in output templates)
npm install clean-webpack-plugin --save-dev (plugin cleanup dist folder)
npm install extract-text-webpack-plugin @ next --save-dev (extract css style plug-ins to prevent the style package loaded disorder caused by the phenomenon of page styles in the js)
- Configuring the local server devserver:
npm install webpack-dev-server --save-dev
C, which is my own practice, simple configuration file:
// node.js the reference path module sets a path
const = path the require ( 'path');
// widget reference HtmlWebpackPlugin
const = HtmlWebpackPlugin the require ( 'HTML-WebPACK-plugin');
// references cleaning / dist folder widget
the require CleanWebpackPlugin {} = const ( 'Clean-WebPACK-plugin');
// detached css style plug
const = ExtractTextPlugin the require ( 'Extract-text-WebPACK-plugin');
module.exports = {
// entry file
entry: './main.js',
// export file
output: {
path // output file, the default path is dist Note: __ dirname represent the current file's directory
path: path.resolve (__ dirname, 'dist'),
// output file name
filename: 'JS / bundle.js'
},
// mode or Production Development
mODE:'development',
// configure how module
module: {
rules: [
{
// regular .css file matches the end of
the Test: /\.css$/,
// need to use the loader, always in that order, because the call loader is compiled from right to left the
// use: [
// 'style-Loader',
// 'CSS-Loader'
//]
use: ExtractTextPlugin.extract ({
fallback: 'style-Loader',
use: 'CSS-Loader'
})
},
{
the Test:. / \ (JPG | PNG | GIF) $ /,
use: [
{
Loader: 'url-loader',
Options: {
// specifies the output to the directory folder dist packed
OutputPath: 'IMG /',
// css style files provided with respect to image file directories
publicPath: '../ IMG',
// this is less than 8K image directly in the form of a base64 biphenyl code can be reduced once the http request; greater than it will copy the file to the new folder
limit: 8192
}
}
]
}
]
},
// widget
plugins: [
new new HtmlWebpackPlugin ( {
// the file name, the default is stored in dist in the
filename: 'index.html',
the template file //
Template: './ public / index.html'
})
// default folder dist clearly
new new CleanWebpackPlugin (),
// detached from the js css style file to the specified folder dist
new new ExtractTextPlugin ( "css / the styles.css"),
],
// devserver server
devServer: {
Host: 'localhost', // IP address of the server
port: 3000, // port
open: true // automatically open pages
}
};
D, webpack build process:
6, vue-cli simple to use:
A, global installation vue-vli 3.x: npm install @ vue / cli -g, view the version command: vue -V
B, create a project: vue create vue-test project name must be lowercase: With this kebab-case style