A, NPM
1.NPM is accompanied NodeJS package management tools installed together.
http://www.1994july.club/?p=1454
2. Installation
npm install -g npm
npm -v test is successfully installed
3. Taobao mirror (cnpm command)
npm install -g CNPM --registry = HTTPS: / /registry.npm.taobao.org
4. installation module
npm install <module Name>
after installing, the module package can placed node_modules directory under the project directory, code and therefore only need
require ( 'express') of way can be introduced, without specifying the path to third-party packages.
Express the require = var ( 'Module1 the Name');
5. The overall installation and installed locally
npm install express # local installation
npm install express -g # global mount
http://www.1994july.club/?p=1456
local installation on the installation package ./node_modules (directory where the run command npm),
can be introduced through a locally installed packages require ().
Global installation packages are located under / usr / local or node of your installation directory,
can be used directly from the command line.
6.Package.json main Property Description
name- package name.
The version number version- package.
Description description- package.
official website homepage- package url.
http://www.1994july.club/?p=1458
author's name author- package.
Other contributors names contributors- package.
dependencies- dependencies list. If dependencies are not installed, the package will depend on NPM automatically installed in node_module directory.
type package code repository- local storage, or may be the svn git, git available on Github.
main-main field specifies the master file entry procedures, require ( 'moduleName') will load the document. The default value of this field is the root directory module index.js.
keywords- keywords.
scripts- script commands
7. commonly used commands
to view the installation information npm list -g
to view a specific module npm list moduleName
uninstall module npm uninstall moduleName
update module npm update moduleName
http://www.1994july.club/?p=1460
search module npm search moduleName
creation module npm init / npm init -y (skip description)
publishing module npm publish
Help Help command npm
npm can empty the Clear Cache NPM local cache
Two, WebPACK
1.webpack JS application is a static module packer. Package can be achieved, conversion, compression optimization.
2.webpack constituting
the inlet entry
outlet Output
loaders to converter
plugins widget
devServer server for simple development
mode model development / production environment
3. Installation webpack
http://www.1994july.club/?p=1462
NPM the install WebPACK -g
NPM-CLI the install WebPACK -g
WebPACK -v
4. Installation depends module
NPM jQuery I
NPM UN jQuery
NPM-I jQuery --save dev (Production compression mode is not optimized)
NPM jQuery --save I (production optimization compression mode)
if not --save and -save-dev parameters, the module will not be added to the dependency package.json
5. the default directory structure
WebPACK Work-
dist-output folder
node_modules- dependent module folder
src- source folder
index.js- entry file
package.json
6. The initialization
NPM the init
NPM skip the init describes -Y
http://www.1994july.club/?p=1464
NPM and the init package.json configuration file in the current directory, according package.json initialization.
7. quickly package
WebPACK the src \ The index.js --output dist \
8.webpack.config.js content
module.exports = {
entry: {} // inlet arranged - to be
output: {} // outlet configuration - must
module: loaders to //module.rules} {
plugins: {} // widget
devServer: {} // server development
}
sample:
const = path the require ( 'path');
module.exports = {
entry: {
A: './ src / index.js' // a key value is custom to.
},
Output: {
// path: __ dirname + '/ dist', // must be an absolute path __dirname node is built-in function, refers to the current path of the absolute
path: path.resolve (__ dirname, ' dist'),
filename: '[name] .bundle.js'
}
}
9. The webpack.config.js default profile
can also specify the configuration file, such as: webpack --config custom.config.js
may be disposed in the script package.json using npm run XXX execution.
webpack --mode development development model does not compress
webpack --mode production mode of production compression
Third, the common plug-ins
http://www.1994july.club/?p=1466
1.html-WebPACK-plugin
functions: support for the html, and rely on native WebPACK webpack-cli
installation: cnpm i html-webpack-plugin -D
introduced: const HtmlWebpackPlugin = require ( 'html-webpack -plugin');
use: new new HtmlWebpackPlugin ({
filename: 'index.html',
of chunks are: [ 'a'], contains JS //
Minify: {
collapseWhitespace: to true, // compression blank
removeAttributeQuotes: true // delete attribute double quotes
},
the hash: to true, // js link random number generation, to prevent cache
title: 'wdwtest',
template: './ the src / index.html' // template may be omitted
} )
2.clean-WebPACK-plugin
function: to clear some things
Download: cnpm i clean-webpack-plugin -D
Introducing: const {CleanWebpackPlugin} = require ( 'clean-webpack-plugin');
use: new new CleanWebpackPlugin ();
3.devServer
: Built development server
downloads: cnpm i webpack-dev-server -D
used: devserver: {
ContentBase : path.resolve (__ dirname, 'dist '), // set up server access basic directory
host: 'localhost', // server IP
Port: '8090',
open: to true, // automatically open the browser
hot: true / / open the hot deployment
}
start: webpack-dev-server --mode development
or use npm run dev package.json configuration command
"scripts": {
"dev": "WebPACK-dev-Server --mode Development"
},
. 4 compression
1) 4.0 --mode production version may be used for compression.
Use --mode development debugging turned on.
2) you can use the previous version 4.0 uglifyjs-webpack-plugin
I-WebPACK-UglifyJS CNPM plugin -D
const = uglify the require ( 'UglifyJS-WebPACK-plugin');
new new uglify ();
using devtool: 'source-map' open debug
5.copy-webpack-plugin
static resources output, copy static resources.
Download: cnpm i copy-webpack-plugin -D
introduced: const CopyWebpackPlugin = require ( 'copy -webpack-plugin');
use: plugins: [
new new CopyWebpackPlugin ([{
from: path.resolve (__ dirname, 'the src / Assets' ),
to: './ public'
}])
]
6. picture plug-
Download: cnpm i file-loader url- loader -D
use: {
the Test: / \ (PNG | JPG | GIF) $ /,.
use: [ {
Loader: 'URL-Loader',
Options: {
limit: 5000 // smaller than the size of the image is converted into base64.
}]
}
7. The isolated css widget
download: cnpm i extract-text-webpack -plugin @ next -D
used:
1.const the require ExtractTextPlugin = ( 'Extract-text-WebPACK-plugin');
2.New ExtractTextPlugin (to extract path out)
3. Test {:. / \ $ css /,
use: ExtractTextPlugin.extract ({
fallback: 'style-Loader',
use: 'css-Loader',
publicPath: '../' // solve css bACKGROUND FIG path problem
})
}
8. eliminate redundant css
Download: cnpm i purifycss-webpack purifycss glob -D
use: = const PurifyCssWebpack the require ( 'purifycss-WebPACK');
const the require glob = ( 'glob');
PurifyCssWebpack new new ({
Paths: glob.sync (path.join (__ dirname, '. the src / * HTML'))
})
Four, loader
1.loader play a loader, the role of reformer, similar to plug-ins.
2.css processing
webpack default can only handle js, requires a corresponding loader plug-css treatment.
style-loader, css-loader.
Download: cnpm i style-loader css- loader -D
used: Module1: {
the rules: [
{
Test: / \ CSS $ /,.
Use: [ 'style-Loader', 'CSS-Loader']
// or loader: [ 'style-Loader', 'CSS-Loader']
// or
// use: [
// {Loader: 'style-Loader'},
// {Loader: 'CSS-Loader'}
//]
}
]
}
five, babel
download: cnpm i babel-loader babel- core babel-preset-env -D
use: {
the Test:. / \ (JS | JSX) $ /,
use: [{
Loader: 'Babel-Loader',
Options: {
PRESET: 'the env'
}
}],
the exclude: / the node_modules /
}
six references
1. derivation module
function Show () {
return 'my new modules'
}
module.exports = Show;
injection module
require ( './ show');
support json introduced directly after 2.webpack3
const = jsonConfig the require ( './ config.json');
3. the use of third-party libraries
1) introduced directly
import $ from 'jquery '
2) ProvidePlugin
const = WebPACK the require (' WebPACK ');
new new webpack.ProvidePlugin ({
$:' jQuery ',
XXX:' XXXX '
})
. 3) $ ... Import, After the introduction, whether or not to code jquery, will be packaged into play, resulting in redundant js.
ProvidePlugin way, only this time the actual library, will be packaged into use.
4) Extraction third-party libraries
Optimization: {
splitChunks: {
cacheGroups: {
AAA: {
// of chunks are: 'Initial',
Test: path.resolve (__ dirname, 'the src / JS / jquery.min.js'),
name:' jQuery ',
of chunks are: "All",
// the minSize:. 1,
priority: 0
}
}
}
}