摘要:基本环境搭建就不展开讲了一插件篇自动补全前缀官方是这样说的,也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。
上一篇博客讲解了webpack环境的基本,这一篇讲解一些更深入的内容和开发技巧。基本环境搭建就不展开讲了
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
</>复制代码
<span class="hljs-attr">Webpack</span> <span class="hljs-string">App</span>
其他配置参数:
</>复制代码
{
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 ---
<span class="hljs-section"><%= htmlWebpackPlugin.options.title %></span>
作用:
</>复制代码
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 | 忽略拷贝指定的文件 | 可以用模糊匹配 |
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的时候看到源代码,方便 查错
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79692.html
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
阅读 1470·2021-09-10 10:51
阅读 2868·2019-08-30 15:54
阅读 3408·2019-08-29 17:11
阅读 976·2019-08-29 16:44
阅读 1438·2019-08-29 13:47
阅读 1124·2019-08-29 13:47
阅读 1524·2019-08-29 12:23
阅读 1091·2019-08-28 18:18
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要