github仓库:https://github.com/llcMite/webpack.git

1)html-webpack-plugin    (用于模板生成html,自动引入output文件)

cnpm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
title: 'reactTest',
filename:'index.html',
template:'./index.html' //模板路径
}) ]

2)clean-webpack-plugin  (用于清理output出来的文件)

cnpm install clean-webpack-plugin --save-dev
plugins:[
new CleanWebpackPlugin(['dist']), //这里我output是dist文件夹,所以清理的dist
]

3)webpack.optimize.CommonsChunkPlugin   (分离第三方库,这里我用的是react)

var path=require('path');
var webpack=require('webpack'); module.exports={
//入口
entry:{
index:'./index.js',
vendor:['react','react-dom']
},
//输出
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].[hash].js',
},
module:{
...
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
names: ["vendor", "manifest"]
})
]
}

4)optimize-css-assets-webpack-plugin   uglifyjs-webpack-plugin   (压缩css及js)

cnpm install uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin --save-dev
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); plugins:[
// 1、压缩CSS
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
//2、压缩JS
new UglifyJSPlugin({
compress: { warnings: false },
// 是否需要sourcePap
// sourceMap: true
}),
]

 5)postcss-loader

cnpm install postcss-loader postcss-import postcss-cssnext --save-dev

配置一个postcss.config.js

module.exports = {
plugins: {
// css 内可以使用 @import 其他CSS文件
'postcss-import': {},
// CSS内可以使用 css3+ 新语法(autoprefixer已经内置到postcss-cssnext)
'postcss-cssnext': {
browsers: ['last 2 versions', '> 5%']
}
}
}

配置webpack.config.js

loaders: [
...
{
test: /\.css$/,
use: ['style-loader','css-loader', { loader: 'postcss-loader', options: { sourceMap: true } }]
},
{
test: /\.less$/,
use:['style-loader', 'css-loader','less-loader', { loader: 'postcss-loader', options: { sourceMap: true } } ]
},
],

webpack常用插件配置记录的更多相关文章

  1. maven常用插件配置详解

    常用插件配置详解Java代码    <!-- 全局属性配置 --> <properties> <project.build.name>tools</proje ...

  2. 日志分析平台ELK之日志收集器logstash常用插件配置

    前文我们了解了logstash的工作流程以及基本的收集日志相关配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13761906.html:今天我们来了解下l ...

  3. Ubuntu 常用环境配置记录

    引言 经常使用 Ubuntu 虚拟机,双系统,WSL,服务器等等,每次配置常用开发环境都要去百度细节,故在此记录一下. 更换软件源 阿里云镜像 清华镜像 # 更新 sudo apt update &a ...

  4. vim 常用命令逐渐熟悉以及常用的配置记录

    本篇博客记录的是我自己学习vim的常用命令的过程中,各个命令的逐渐熟悉的顺序(有一部分已经熟悉的命令没有列出),已经对vim编辑器本身的一些设置的记录 1.G 快速将光标切换到文件的最底部 2.u 撤 ...

  5. Maven常用插件配置和使用

    主要介绍Maven的几个常见第三方插件(cobertura.findbugs.source.assembly.插件开发)配置和使用,接Maven介绍 maven本质上是一个插件框架,它的所有工作都交给 ...

  6. webpack 常用插件及作用

    copy-webpack-plugin :复制文件到目标文件夹.在开发时使用热模替换,(没有生成dist 文件夹,都在内存中),如果想引用某一个js文件,直接写script标签是找不到的,因为服务器内 ...

  7. centos中apache自用常用额外配置记录(xwamp)

    xwamp套件中apache配置,记录下,以免忘记. 配置路径 ${wwwroot_dir}/conf/httpd.conf 配置内容 <ifmodule mod_deflate.c> D ...

  8. jsplumb 流程图,常用功能配置记录

    前言: jsplumb 有2个版本一个Toolkit Edition(付费版),另外一个就是Community Edition(社区版本).Toolkit Edition版本功能集成的比较丰富,社区版 ...

  9. VSCODE常用插件使用记录

    常用必备: 1.vscode-icon 让 vscode 资源树目录加上图标,必备良品! 2.Path Intellisense 自动路劲补全,默认不带这个功能的 3.beautify Beautif ...

随机推荐

  1. RabbitMQ:Docker环境下搭建rabbitmq集群

    RabbitMQ作为专业级消息队列:如何在微服务框架下搭建 使用组件 文档: https://github.com/bijukunjummen/docker-rabbitmq-cluster 下载镜像 ...

  2. Gitlab构建分布式版本控制系统

    一 安装依赖 1.sudo yum install curl policycoreutils openssh-server openssh-clients 2.sudo systemctl enabl ...

  3. redis----------windows下安装redis以及PHP的redis扩展

    1.redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...

  4. Session, Token and SSO 有什么区别

    Session, Token and SSO 有什么区别 Basic Compareation Session-based Authentication In Session-based Authen ...

  5. vue使用桌面Element-UI和移动端MintUI的UI框架

    vue使用桌面Element-UI和移动端MintUI的UI框架 element-uiElement - 网站快速成型工具http://element-cn.eleme.io/#/zh-CN 安装:n ...

  6. python学习教程,史上最全面的python学习路线图

    Python 是Web 开发.游戏脚本.计算机视觉.物联网管理和机器人开发的主流语言之一,随着Python用户可以预期的增长,它还有机会在多个领域里登顶.Python学习路线分享给你. 阶段一是Pyt ...

  7. random模块写的验证码

    import randomabc=''for i in range(4):    a=random.randrange(0,4)    if i != a:        b=chr(random.r ...

  8. PHP5.6 Dockerfile

    FROM centos COPY ["src","/src"] RUN groupadd -g 1000 www \ && useradd -u ...

  9. Docker Macvlan 介绍 or 工作原理

    Docker Macvlan Network Macvlan Network:属于Docker的网络驱动. Macvlan Network:Docker主机网卡接口逻辑上分为多个子接口,每个子接口标识 ...

  10. jmeter基本使用

    下载安装,推荐官网http://jmeter.apache.org/download_jmeter.cgi 安装步骤不做赘述,可以看这篇博文https://blog.csdn.net/u0103401 ...