webpack tree shaking postcss

对于package.json  中 设置script标签中

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

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

js-tree-shaking

tree-shaking技术，能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块，而不被引用或不被执行的模块被删除掉，以起到减包的效果。减少页面加载时间

 

使用到的插件来源 www.npmjs.com

webpack默认的jstree-shaking格式为

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

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

webpack-deep-scope-plugin 插件实现深度js-tree-shaking

使用如下

cnpm install webpack-deep-scope-plugin -D


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

css-tree-shaking

首先 引用loader解析css文件

随后实现单独抽离出css文件于dist文件夹中

用到的插件mini-css-extract-plugin

使用如下

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

为css添加内核前缀     

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

  

posscss loader要至于less-loader与css-loader之间  

ident  指明操作对象

添加插件 require导入

postcss-cssnext    解析计算属性  添加前缀

cssnano  压缩文件

 

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

html文件处理

实现html抽离 并自动添加链接

html-webpack-plugin  

先安装在引用

为区别于每次打包生成的文件 可以添加hash值