webpack常用plugin(插件)和loader

197 阅读1分钟

一、常用的插件(plugin)

1. html-webapck-plugin   

    生成html文件的插件,然后根据html template生成N个页面

2. extract-text-webapck-plugin

     将文件当作文本抽取出来,如css文件抽取出来放到style去

3. UglifyJsPlugin/new webpack.optimize.UglifyJsPlugin()

     自带插件也是用来对js文件的压缩,如删除空格和注释等来减小体积

 4. CommonsChunkPlugin/newwebpack.optimize.CommonsChunkPlugin( )

      抽离公用的文件库放置common内

 5. clean-webpack-plugin

     打包之前删除之前遗留下的的文件再去打包新文件

  6. copy-webapck-plugin

       文件的复制等


二、常用的loader

1. css-loader   sass-loader/less-loader/node-sass    

     解析css文件  sass/less/node-sass文件

2. file-loader/url-loader

   解析图片  png/jpg/svg/gif文件  

   url-loader根据文件的大小决定是否用base64或者服务器地址图片

3. postcss-loader、 autoprefixer

    给css添加前缀