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={ ...
随机推荐
- HDU 1114 【完全背包裸题】
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- Python与数据结构[0] -> 链表/LinkedList[2] -> 链表有环与链表相交判断的 Python 实现
链表有环与链表相交判断的 Python 实现 目录 有环链表 相交链表 1 有环链表 判断链表是否有环可以参考链接, 有环链表主要包括以下几个问题(C语言描述): 判断环是否存在: 可以使用追赶方法, ...
- hdu3507（初识斜率优化DP）
hdu3507 题意 给出 N 个数字,输出的时候可以选择连续的输出,每连续输出一串,它的费用是 这串数字和的平方加上一个常数 M. 分析 斜率优化dp,入门题. 参考 参考 得到 dp 方程后,发现 ...
- Jmeter进行webSocket接口测试
一.运行Jmeter (1) 去官方网站下载jmeter(版本为3.3)并解压.点击bin/jmeter.bat启动jmeter (2) 新建线程组. (3) 在线程组中新建WebSocket Sa ...
- spring线程并发处理（ThreadLocal）
我们知道Spring通过各种DAO模板类降低了开发者使用各种数据持久技术的难度.这些模板类都是线程安全的,也就是说,多个DAO可以复用同一个模板实例而不会发生冲突. 我们使用模板类访问底层数据,根据持 ...
- iOS isa 浅析
看见一到面试题讲述一下Objective-C中的isa?完全没听说过,打算小研究一下. 参考:http://blog.sina.com.cn/s/blog_7a2ffd5c01010nme.html ...
- IntelliJ debug grails 无效的解决办法
从Grails 2.2以后默认run-app命令将启动Grails应用程序在一个单独的Java虚拟机. 这就是所谓的分叉的Tomcat Grails中的执行. 这样的类路径Grails构建系统和应用程 ...
- 【视频】Linux高级程序设计01.3命令行选项及参数
[课程笔记] [命令行参数] 选项:-l -a -i 参数:-l /home main 函数形式: int main(int argc, char *argv[]) main函数是有参数的,而且有返回 ...
- JAVA常见算法题(十四)
package com.xiaowu.demo; /** * 输入某年某月某日,判断这一天是这一年的第几天? * * * @author WQ * */ public class Demo14 { p ...
- 用js怎么控制submit提交表单
需求: 1. 要在点击submit按钮的时候,弹出一个询问框,"你确定要修改?".如果按了"确定"那么就提交表单,否则就保留在原页面,既不提交不跳转. 2. 要 ...