webpack3.0+ Summary

Webpack Direct Packaging

• 1. Installed production environment
• 2. package webpack import file path Export file path

Webpack.config.js Configuration

• 1. Ingress and Outbound configuration
  • 1-1. Direct console input Webpack can be packaged.
  • 1-2. Multi-entry file configuration
  • 1-3. Hot update Installation
  • 1-4.css-loader Style-loader Configuration Three ways
  • 1-5. Code compression Plugin Uglifyjs-webpack-plugin Secondary plug-in webpack internal integration does not require installation Note: This can not be started with Dev, the original webpack compression can be
  • 1-6. The file path separated by the start server in the production environment is OK. For website path prefixes can be changed

  •  Const Path=require (' path '  = {entry:  './src/index.js ', //  Portal configuration   output:{Path:path.resolve (__dirname,  ' dist '), //  exit path  filename: ' index.js ' 

    Const Path=require (' path '); Module.exports={    entry:{        entry1:'./src/index1.js ',        entry2:'./src/index2.js '    // Multi-entry configuration     output:{        Path: Path.resolve (__dirname,' dist '),// exit path        filename: ' [name].js '//  The multi-exit name indicates the same as the corresponding entry file entry property name     }}

HTML file into Src's SAO operation, HTML packaging

• 1. Install and introduce Html-webpack-plugin
• 2. Run the webpack,html file directly in the terminal to be packaged in the Dist folder

CSS introduced picture packaging directly packaged into JS part

• 1. Install File-loader Url-loader
• 2. Configuration

CSS Separation

• 1. Detach the CSS that is packaged to the JS file
• 2. Download the package and introduce Extract-text-webpack-plugin
• 3. Modify the CSS configuration but there is a problem with the separated CSS path.
• 4. Set the public path of the export file http://localhost:8080
• 5. If the local reference sets the public path to Path.resolve (' dist ')

IMG-Introduced picture packaging

• 1. Installing Html-withimg-loader
• 2. Configuration

How to automatically add kernel prefixes for animated styles

• 1. Installing Postcss-loader and Autoprefixer
• 2. New File Postcss.config.js
• 3. Configuration

Remove unwanted CSS Styles

• 1. Install Purifycss-webpack PURIFY-CSS
• 2. Global Introduction
• 3. Configure Plgins

ES5 to the latest package converted to 6

• 1. Download and install Babel-preset-env
• 2. Add the. BABELRC configuration

directory structure

Webpack.config.js Configuration

Const Path=require (' path '); Const uglify=require (' Uglifyjs-webpack-plugin '); Const Htmlplugin=require (' Html-webpack-plugin '); Const Extracttextplugin= Require ("Extract-text-webpack-plugin"); Const GLOB= Require (' Glob ');//Check HTML synchronouslyConst PURIFYCSSPLUGIN = require ("Purifycss-webpack");//Remove unwanted CSS-style pluginsvarWebsite ={publicPath:path.resolve (' Dist ')}module.exports={entry:{Entry1:'./src/index1.js ', Entry2:'./src/index2.js '    }, //Multi-entry configurationoutput:{path:path.resolve (__dirname,' Dist '),//Exit PathFileName: ' [name].js ',//the multi-exit name indicates the same as the corresponding entry file entry property namePublicPath:website.publicPath//Public Path}, devserver:{//set the base directory structureContentBase:path.resolve (__dirname, ' dist ')),        //IP address of the server, you can use IP or localhostHost: ' localhost ',        //server-side compression is turned onCompresstrue,        //Configure the service port numberport:8080}, module:{rules:[{test:/\.css$/,                //An expression that matches the extension of the processing file, which must be configured;use:extractTextPlugin.extract ({fallback:"Style-loader", use:[{loader:' Css-loader ', options: {importloaders:1 } },                    ' Postcss-loader ']                  })//Detach CSS File configuration                //use:[' Style-loader ', ' css-loader ', ' Postcss-loader ' ,                //loader name, that is, you want to use the name of the module, this option must also be configured, otherwise error;                //include/exclude: "Manually add files (folders) that must be processed or block files (folders) that do not need to be processed (optional);                //query: ' Provides additional setup options for loaders (optional).             }            /** * rules:[{* test:/\.css$/, * loader:[' style-loader ', ' css-loader '] * or Use[{loader: "Style-loader"},{loader: ' Css-loader '}] *}] * **/, {test:/\.js$/,//JS5 ext. 6Use : [{loader:' Babel-loader ', Options: {presets: [' Es2015 ']}}], exclude:/node_modules/},{Test:/\. (png|jpe?g|gif|svg) (\?. *)?$/, use:[{loader:' Url-loader ',//less than 500000b url-loader conversion, greater than the given to File-loaderoptions:{//URL built-in file only need to be cited Url-loader greater than automatically to file processinglimit:500000,//writes files that are less than 500000b into the base64 format to JS} }]}, {test:/\. (htm|html) $/i,//img Image correct path configurationuse:[' Html-withimg-loader ']}]}, plugins:[Newuglify (),NewExtracttextplugin ("/css/index.css"),//the path after the CSS style is detached        NewHtmlplugin ({minify:{removeattributequotes:true//is to compress the HTML file, Removeattrubutequotes is the double quotation mark that the property is dropped. }, Hash:true,//in order to develop JS has a cache effect, so add hash, this can effectively avoid the cache JS. Template: './src/index.html '//is the HTML template path and file name to be packaged.                    }),        NewPurifycssplugin ({//Give paths to parse for rules. These should be absolute!Paths:glob.sync (Path.join (__dirname, ' src/*.html '))),            })//used to prune extra CSS styles    ]}

Common packages

{  "Name": "Es6",  "Version": "1.0.0",  "description": "",  "Main": "Index.js",  "Scripts": {    "Build": "Webpack",    "Dev": "Webpack-dev-server"  },  "keywords": [],  "Author": "",  "License": "ISC",  "Dependencies": {    "Babel-cli": "^6.26.0"  },  "Devdependencies": {    "Autoprefixer": "^7.1.6",//CSS Add kernel prefixes"Babel-core": "^6.26.0",//es5 Conversion Es6 Method 1"Babel-loader": "^7.1.2",//es5 Turn Es6 Method 1"babel-preset-es2015": "^6.24.1",//es5 Turn Es6 Method 1"Css-loader": "^0.28.7",//CSS style parsing"Extract-text-webpack-plugin": "^3.0.2",//CSS File Separation"File-loader": "^1.1.5",//image and other file parsing"Html-webpack-plugin": "^2.30.1",//HTML is automatically loaded JS is HTML packaging"Html-withimg-loader": "^0.1.16",//img Picture Path Packaging"Postcss-loader": "^2.0.9",//adding kernel prefixes to CSS"Style-loader": "^0.19.0",//CSS style parsing"Url-loader": "^0.6.2",//image and other file parsing"Webpack": "^3.8.1",    "Webpack-dev-server": "^2.9.5"//Hot Update Module  }}

Postcss.config.js

Module.exports = {    plugins: [        require (' autoprefixer ')    ]}

. babelrc.js

{    "presets": ["es2015"]  }//   {//     " Presets ": [" React "," env "]//  }//convert es5 to ES6 by converting to Env

webpack3.0+ Summary