webpack tree shaking postcss

For the script tag provided in package.json

"dev": "webpack --mode development",
"prod": "webpack --mode production"

//执行git时  运行 npm run dev  以此运行对应的模式

js-tree-shaking

tree-shaking technique, the package code can do only contain the referenced module and executed at the level of the module, without the referenced module is not performed or is deleted, to play the effect of reducing the package. Reduce page load time

 

Use to plug the source www.npmjs.com

webpack default jstree-shaking format

var sum = function(a, b) {
    return a + b;
}
var chande = function() {
    console.log('hahahahh')
}

export default {
    sum,
    chande
};
//单独变量式导出  而非导出一个对象   并且 需要在production模式下有效

webpack-deep-scope-plugin plugin implements depth js-tree-shaking

Use the following

cnpm install webpack-deep-scope-plugin -D


const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin');
 
module.exports = {
  ...,
  plugins: [
    ...,
    new WebpackDeepScopeAnalysisPlugin(),
  ],
}

css-tree-shaking

First of all references loader parsing css file

Css then be individually pulled out of the file folder in dist

Use of plug-in mini-css-extract-plugin

Use the following

cnpm install --save-dev mini-css-extract-plugin


const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module: {
        rules: [{
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }

        ]
    },


plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      //chunkFilename: '[id].css',
      //ignoreOrder: false, 
    }),
  ],

tree-shaking css

const PurifyCSSPlugin = require('purifycss-webpack');
const path = require('path');
const glob = require('glob-all');


new PurifyCSSPlugin({
            // Give paths to parse for rules. These should be absolute!
            paths: glob.sync([path.join(__dirname, './*.html'),
                path.join(__dirname, './src/index.js')
            //用域匹配js中动态加入的dom
            ]),
        }),

 

postcss

Add a prefix to the kernel css     

//下载插件
npm install postcss postcss-loader autoprefixer cssnano postcss-cssnext -D

  

As posscss loader to between less-loader with css-loader  

indicate the operation target ident

Add plug-ins require the import

Analytical calculated attribute postcss-cssnext adding a prefix

cssnano compressed files

 

---------------------------------------------------------------------------------------------------------------------------------------------

html file processing

Html pulled achieve and automatically add links

html-webpack-plugin  

In reference to install

Each package is different from the generated files can be added hash value