WEBPACK3 Basic Knowledge

# # Localized Installation Webpack # #

1. NPM init//npm initialize generate Package.json file
2. NPM Install--save-dev webpack//install Webpack,dev for installation in the development environment, save indicates local installation
3. If it is an old project, have Package.json file, directly run NPM I install the corresponding dependent package

# # Webpack Quick Pack # #

Webpack Src/entery.js Dist/bundle.js
Package Entery.js to Bundle.js
If you have a configuration file, run Webpack directly

# # Package.json # #

{
"Name": "Webpacktest",
"Version": "1.0.0",
"description": "Test Webpack",
"Main": "Index.js",
"Scripts": {//local NPM Start command: NPM run xxxx
"Server": "Webpack-dev-server--open",
Open indicates automatic opening
"Build": "Set Type=build&webpack",//node syntax, passing parameters
"Dev": "Set Type=dev&webpack"//mac or Linux:export Type=dev&&webpack
},
"Author": "Tabb",
"License": "ISC",
"Devdependencies": {//Develop dependent--save-dev
"Webpack": "^3.6.0",
"Webpack-dev-server": "^2.8.2"
},
"Dependencies": {//Production dependent--save ' NPM install--production ' (Project on-line installs only build package)

}
}

# # Webpack Config # #

Configuration file Webpack.config.js
Const Glob=require ("Glob"); Introducing a global control plug-in
Const Path=require (' path '); Introducing the Path module
Const Uglify=require (' Uglify-webpack-plugin '); Introduction of JS code automatic compression module
Const Htmlplugin=require (' Html-webpack-plugin '); Introducing HTML Packaging Plugins
Const Extracttextplugin=require (' Extract-text-webpack-plugin '); Introducing File Separation Plugins
Const Purifycssplugin=require ("Purfiycss-webpack"); Introducing CSS redundancy to remove plugins
Const Copywebpackplugin=require ("Copy-webpack-plugin"); Introducing static resource Processing
Package different root directories to differentiate between production and development environments based on configuration values
if (process.env.type= "build") {//node syntax
var website={
Publicpath: "http://tabb.com/"//Set Root path
}
}else{
var website={
Publicpath: "http://192.168.0.104/"//Set Root path
}
}
var website={
Publicpath: "http://192.168.0.104/"//Set Root path
}
module.exports={
entry:{//Portal file path
Entry1: './src/entry1.js ',
Entry2: './src/entry2.js ',
jquery: ' jquery ',
Vue: ' Vue '
},
output:{//Export documents
Path:path.resolve (__dirname, ' dist '),
FileName: ' bundle.js '//writable [NAME],JS remains consistent with the entry file name
PublicPath:website.publicPath//Set public path for project reference
},
module:{
rules:[//CSS Packaging
{
test:/\.css$/,//regular match corresponding to the file to be processed
use:[' Style-loader ', ' css-loader ']//Add a function module to be used for packaging
Can also be written in the following form
use:[{
Loader: ' Style-loader '
},{
Loader: ' Css-loader '
},
"Postcss-loader"//CSS3 automatically prefixed
],
Extract extraction Treatment
Use:extractTextPlugin.extract ({
Fallback: "Style-loader",
Use: "Css-loader"
})
}，
{
Test:/\. (png|jpg|gif)/,//processing pictures
use:[
{
Loader: ' Url-loader ',
boptions:{
limit:5000//Set picture less than how large the display is Base64 encoded
OutputPath: "images/"//Configuration Picture generation Path
}
}
]
}，
{//handling image in HTML image tag reference picture
Test:/\. (htm|html) $/i,
use:[' Html-withimg-loader ']
}，
{//Processing less files
Test:/\. (htm|html) $/i,
use:[
{
Loader: "Style-loader"
},{
Loader: "Css-loader"
},{
Loader: "Less-loader"
}
]
},
{//babel Configuration
Test:/\. (JSX|JS) $/,
use:{
Loader: "Babel-loader",
options:{
presets:["es2015", "react"]
}
},
exclude:/node_modules/
}
]
},
plugins:[
New Copywebpackplugin ({//handling static resources
From:__dirname + "/src/public",//static resource source
To: "./public"//Default to Dist directory
}),
New Webpack.optimize.CommonsChunkPlugin ({//Configure third-party plug-ins to pull away from packaging
name:[' jquery ', ' vue '],//key in the entry configuration entry
FileName: "Assets/js/[name." [ext],//config output path, change [ext] to Js,[name] automatically match the name of the configuration
Minchunks:2
})
New Webpack. Provideplugin ({
$: "jquery"
}),
New Uglify (),//development environment will error, because development environment code 100% does not compress
New Htmlplugin ({
minify:{//Configure compression conditions
Removeattributequotes:true//Remove quotation marks from labels
},
Hash:true,//Add hash to the introduced JS, guarantee to load new files, prevent cache
Template: './src/index.html '
})，
New Extracttextplugin ("/css/index.css"),//Specify CSS to detach the package path
New Purifycssplugin ({
Paths:glob.sync (Path.join (__dirname, ' src/*.html '))//Global search for DOM in HTML file, find a valid CSS
}),
New Webpack. Bannerplugin ("Tabb All Rights Reserved")//Set the title comment of the packaging file
],
devserver:{//Development service configuration, need to install Webpack-dev-server
ContentBase:path.resolve (__dirname, ' dist '),//Basic directory structure
Host: ' 192.168.0.104 ',//server host
Compress:true,//whether the server is enabled for compression
port:1717//Port
},
watchoptions:{//Automatic monitoring Watch package configuration
poll:1000,//monitoring time of modification
aggregeatetimeout:500,//= Repeat key within 500ms ctrl+s not packaged
ignored:/node_modules/,//Ignore monitoring items
}
}

# # Babel config file, BABELRC # #

{
presets:["env", "react"]//env conversion ES6,ES7, etc.
}

# # Webpack in the tool installation # #

1. Webpack-dev-server//Hot Update Tool
2. Style-loader//Style processing
3. Css-loader//css File Processing
4. Uglify-webpack-plugin//JS Automatic compression plug-in
5. Html-webpack-plugin//html Packaging Plugin
6. Url-loader//processing path
7. File-loader//Handling loading files
8. Extract-text-webpack-plugin//Pull away CSS and other files packaging
9. Html-withimg-loader//Processing HTML using IMG tag reference picture
. Less Less-loader//less compilation
Sass Sass-loader//sass Compilation
Postcss-loader autoprefixer//CSS3 Auto-Add prefix dependency
Purify-css purify-webpack//auto-delete CSS Redundancy
Babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-env//babel is used for compiling syntax such as ES6, and react in JSX
Webpack. Provideplugin//Unified Configuration Introduction Plugin
Webpack.optimize.CommonsChunkPlugin//Configure third-party plug-in extraction and packaging
Copy-webpack-plugin//Static resource packaging

WEBPACK3 Basic Knowledge