A, webpack

Modular packaging toolCopy the code

Install webPack

2.1 Install CNPM install webpack -g CNPM install webpack-cli -g 2.2 Test version webpack -v webpack-cli -vCopy the code

3. Use WebPack briefly

Webpack == itself is used to pack JS if you want to pack: HTML, CSS... 1. Go to the project directory and create a random js file SRC /index.js 2. Webpack CNPM install webpack -s 3. At the terminal: Webpack naming will pack successfullyCopy the code

Four, entrance

Default: SRC/index. JsCopy the code

Five, the export

Default: dist/main. JsCopy the code

Six, multiple files packaged into a file

Problem: multiple entry file = = = > single file export solution: entry: ['. / SRC/a. s', '. / SRC/b.j s]Copy the code

Seven, multiple files packaged into multiple files

Problem: multiple entry file = = = "many export solution: entry: {a: '. / SRC/a. s' b: '. / SRC/b.j s'},Copy the code

What is loader

Webpack can only understand JavaScript and JSON files, which is a built-in capability of WebPack available out of the box. Loader enables WebPack to process other types of files and convert them into valid modules for use by applications and to be added to dependency diagrams.Copy the code

Ix. Loader Configuration

Rules: [{test: /\. CSS $/, use: ['style-loader','css-loader']}]} The use attribute defines which loader should be used during conversion. **** must remember to download loaderCopy the code

Plug-in: HTML – webpack – the plugin

* * * reference site: https://www.cnblogs.com/wonyun/p/6030090.htmlCopy the code

Use steps:

CNPM install html-webpack-plugin-s 2. Var HtmlWebpackPlugin = require('html-webpack-plugin'); Plugins: [new HtmlWebpackPlugin()] 4. Parameter description 4.1 specifying a template page template:'./ SRC /index.html' 4.2 changing the default output filename filename:'xx.html' 4.3 allowing chunks to be inserted into the template: ['jquery','xx'] 4.4 Configuring Thunk excludeChunks not allowed to inject :['xx'] 5. Multi-page packaging requires the creation of multiple New HTMLWebPackPluginsCopy the code

X. loader ==> file-loader

{
    test: /\.(png|jpg|jpeg|gif)$/, 
    use: [{
        loader:'file-loader',
        options:{
          esModule:false,
          outputPath:'img/'
        }
    }]
}
Copy the code

Loader ==> HTML -withimg-loader

{
    test: /\.html$/, 
    use: 'html-withimg-loader'
}	
Copy the code

Add font icon:

{ test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'file-loader? name=./fonts/[name].[ext]' }Copy the code

Compress and pack the CSS

Var MiniCssExtractPlugin = require('mini-css-extract '); var MiniCssExtractPlugin = require(' mini-CSs-extract '); Loader: {test: /\.css$/, use: [MiniCssExtractPlugin. Loader, 'CSS - loader]} 1.4 using plugins plugins: [new MiniCssExtractPlugin ()] 2. Optimize - CSS -assets-webpack-pluginCopy the code