webpack 使用配置
注意：webpack 2.0版本之后有所区别
一、插件篇
1. 自动补全css3前缀
autoprefixer
官方是这样说的：
Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
，也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。
举个栗子：最新的弹性盒模型flux实际代码：
:fullscreen a {
display: flex
}插件自动补充后
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}效果显而易见，我们可以更专注于css布局和美化，而不需要花过多的精力都写相同的外码而加上不同的前缀，也减少了冗余代码。
使用方法:
cnpm install --save-dev autoprefixer postcss-loader
var autoprefixer = require('autoprefixer');
module.exports={
//其他配置这里就不写了
module:{
loaders:[
{
test:/\.css$/,
//在原有基础上加上一个postcss的loader就可以了
loaders:['style-loader','css-loader','postcss-loader']
}
]
},
postcss:[autoprefixer({browsers:['last 2 versions']})]
}2. 自动生成html插件
html-webpack-plugin
cnpm install html-webpack-plugin --save-dev
//webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:'./index.js',
output:{
path:__dirname+'/dist',
filename:'bundle.js'
}
plugins:[
new HtmlWebpackPlugin()
]
}作用:它会在dist目录下自动生成一个index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>其他配置参数:
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'admin.html',
template:'header.html',
inject: 'body',
favicon:'./images/favico.ico',
minify:true,
hash:true,
cache:false,
showErrors:false,
"chunks": {
"head": {
"entry": "assets/head_bundle.js",
"css": [ "main.css" ]
},
xhtml:false
})
]
}--- header.html ---
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>作用：
title: 设置title的名字
filename: 设置这个html的文件名
template:要使用的模块的路径
inject: 把模板注入到哪个标签后 'body',
favicon: 给html添加一个favicon './images/favico.ico',
minify:是否压缩 {...} | false （最新api变动，原来是ture|false 感谢@onmi指正)
hash:是否hash化 true false ,
cache:是否缓存,
showErrors:是否显示错误,
chunks:目前没太明白
xhtml:是否自动毕业标签 默认false 3. 提取样式插件
extract-text-webpack-plugin
官网是这么解释的
Extract text from bundle into a file.,把额外的数据加到编译好的文件中
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/public/index.html',
inject: 'body'
}),
new ExtractTextPlugin("[name].[hash].css")
]
}说明：将css放到index.html的body上面
4. 拷贝资源插件
copy-webpack-plugin
官方这样解释
Copy files and directories in webpack,在webpack中拷贝文件和文件夹
cnpm install --save-dev copy-webpack-plugin
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]),作用：把public 里面的内容全部拷贝到编译目录
| 参数 | 作用 | 其他说明 |
|---|---|---|
| from | 定义要拷贝的源目录 | from: __dirname + '/src/public' |
| to | 定义要烤盘膛的目标目录 | from: __dirname + '/dist' |
| toType | file 或者 dir |
可选，默认是文件 |
| force | 强制覆盖先前的插件 | 可选 默认false |
| context | 不知道作用 | 可选 默认 base context 可用 specific context |
| flatten | 只拷贝文件不管文件夹 | 默认是false |
| ignore | 忽略拷贝指定的文件 | 可以用模糊匹配 |
5. 全局挂载插件
webpack.ProvidePlugin [webpack内置插件 ]
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}))
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.CommonsChunkPlugin('common.js')作用: 和上面5个一一对应
当模块使用这些变量的时候,wepback会自动加载。（区别于window挂载，感谢@lihuanghe121指正）
不显示错误插件
查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
丑化js 混淆代码而用
提取公共代码的插件二、一个完整的栗子
'use strict';
// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
module.exports = function makeWebpackConfig() {
var config = {};
config.entry = isTest ? {} : {
app: './src/app/app.js'
};
config.output = isTest ? {} : {
// Absolute output directory
path: __dirname + '/dist',
publicPath: isProd ? '/' : 'http://localhost:8080/',
filename: isProd ? '[name].[hash].js' : '[name].bundle.js',
chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js'
};
if (isTest) {
config.devtool = 'inline-source-map';
} else if (isProd) {
config.devtool = 'source-map';
} else {
config.devtool = 'eval-source-map';
}
config.module = {
preLoaders: [],
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.css/,
loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file'
}, {
test: /\.json$/,
loader: 'json'
}, {
test: /\.scss/,
loader: 'style!css!sass'
}, {
test: /\.html$/,
loader: 'raw'
}]
};
if (isTest) {
config.module.preLoaders.push({
test: /\.js$/,
exclude: [
/node_modules/,
/\.spec\.js$/
],
loader: 'isparta-instrumenter'
})
}
config.postcss = [
autoprefixer({
browsers: ['last 2 version']
})
];
config.plugins = [];
if (!isTest) {
config.plugins.push(
new HtmlWebpackPlugin({
template: './src/public/index.html',
inject: 'body'
}),
new ExtractTextPlugin('[name].[hash].css', {disable: !isProd})
)
}
if (isProd) {
config.plugins.push(
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}]),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}))
}
config.devServer = {
contentBase: './src/public',
stats: 'minimal'
};
return config;
}();
三、调试技巧
if (isTest) {
config.devtool = 'inline-source-map';
} 作用: 使用source-map可以在debug的时候看到源代码，方便 查错
webpack 使用配置的更多相关文章
- webpack常用配置总结
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- webpack安装配置使用教程详解
webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...
- webpack实用配置
前面的话 上文介绍了webpack入门,本文将详细介绍webpack实用配置 版本号 以entry.js打包为bundle.js为例,出口的filename可以设置为[id].[name].[hash ...
- 在找一份相对完整的Webpack项目配置指南么？这里有
Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...
- webpack安装配置
webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...
- vue-cli+webpack打包配置
vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
- Webpack的配置与使用
一.什么是Webpack? WebPack可以看做是模块打包机.用于分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),将 ...
- 深入浅出的webpack构建工具---webpack基本配置(一)
深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...
- webpack详细配置解析
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
- webpack快速入门——实战技巧：webpack模块化配置
首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...
随机推荐
- cdq分治浅谈
$cdq$分治浅谈 1.分治思想 分治实际上是一种思想,这种思想就是将一个大问题划分成为一些小问题,并且这些小问题与这个大问题在某中意义上是等价的. 2.普通分治与$cdq$分治的区别 普通分治与$c ...
- 四. Java继承和多态10. Java Object类
Object 类位于 java.lang 包中,是所有 Java 类的祖先,Java 中的每个类都由它扩展而来. 定义Java类时如果没有显示的指明父类,那么就默认继承了 Object 类.例如: p ...
- MySQL 三节点企业版
https://promotion.aliyun.com/ntms/act/rds/mysqlenterprise.html
- KVM Network Bridging
from http://hzqtc.github.io/2012/02/kvm-network-bridging.html http://wiki.ubuntu.org.cn/Kvm_%E7%BD%9 ...
- python里的“__all__ ”作用
转载:http://python-china.org/t/725 参考:http://www.cnblogs.com/alamZ/p/6943869.html 用 __all__ 暴露接口,这是一种约 ...
- 如何对POST请求但是URL中也有参数/GET请求但是请求体中也有参数的情况进行安全扫描
通常情况下,GET的参数都在URL中,POST的参数都在请求体中,但是如题的情况也有,像使用方法PUT.DELETE的情况也有,这些情况该如何进行安全扫描呢?
- EJB vs Spring
转载: Spring 自从2003年发布以来,一直是Java开源框架的奇迹之一.从2000年开始,伴随着B/S架构逐渐引入企业应用软件开发的领域,Java就逐渐成为企业应用开发的主流技术,一直到200 ...
- zabbix通过snmp监控linux主机
1.安装net-snmp [root@db01 ~]# yum install -y net-snmp 2.修改配置文件 [root@db01 ~]# vim /etc/snmp/snmpd.conf ...
- 配置Linux实现静态路由
配置Linux实现静态路由 背景和原理 路由器的功能是实现一个网段到另一个网段之间的通信,路由分为静态路由.动态路由. 默认路由和直连路由.静态路由是手工指定的,使用静态路由的好处是网络安全保密性高. ...
- 2017.7.21 Linux中ELK服务后台运行方式
通过 2017.7.18 linux下ELK环境搭建 搭建好服务于之后,一旦按下Ctrl+C或者退出登录会话,服务的进程就随之停止了.要长期在后台运行此程序,有几种方式: 1 nohup 输入Ctrl ...