资讯专栏INFORMATION COLUMN

webpack进阶之插件篇

Tonny / 3454人阅读

摘要:基本环境搭建就不展开讲了一插件篇自动补全前缀官方是这样说的,也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。

上一篇博客讲解了webpack环境的基本,这一篇讲解一些更深入的内容和开发技巧。基本环境搭建就不展开讲了

一、插件篇 1. 自动补全css3前缀

autoprefixer

</>复制代码

  1. 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
    ,也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。

举个栗子:最新的弹性盒模型flux
实际代码:

</>复制代码

  1. :fullscreen a {
  2. display: flex
  3. }

插件自动补充后

</>复制代码

  1. a {
  2. display: -webkit-box;
  3. display: -webkit-flex;
  4. display: -ms-flexbox;
  5. display: flex
  6. }

效果显而易见,我们可以更专注于css布局和美化,而不需要花过多的精力都写相同的外码而加上不同的前缀,也减少了冗余代码。

使用方法:

cnpm install --save-dev autoprefixer postcss-loader

</>复制代码

  1. var autoprefixer = require("autoprefixer");
  2. module.exports={
  3. //其他配置这里就不写了
  4. module:{
  5. loaders:[
  6. {
  7. test:/.css$/,
  8. //在原有基础上加上一个postcss的loader就可以了
  9. loaders:["style-loader","css-loader","postcss-loader"]
  10. }
  11. ]
  12. },
  13. postcss:[autoprefixer({browsers:["last 2 versions"]})]
  14. }
2. 自动生成html插件

html-webpack-plugin

cnpm install html-webpack-plugin --save-dev

</>复制代码

  1. //webpack.config.js
  2. var HtmlWebpackPlugin = require("html-webpack-plugin");
  3. module.exports={
  4. entry:"./index.js",
  5. output:{
  6. path:__dirname+"/dist",
  7. filename:"bundle.js"
  8. }
  9. plugins:[
  10. new HtmlWebpackPlugin()
  11. ]
  12. }

</>复制代码

  1. 作用:它会在dist目录下自动生成一个index.html

</>复制代码

  1. <span class="hljs-attr">Webpack</span> <span class="hljs-string">App</span>

其他配置参数:

</>复制代码

  1. {
  2. entry: "index.js",
  3. output: {
  4. path: "dist",
  5. filename: "bundle.js"
  6. },
  7. plugins: [
  8. new HtmlWebpackPlugin({
  9. title: "My App",
  10. filename: "admin.html",
  11. template:"header.html",
  12. inject: "body",
  13. favicon:"./images/favico.ico",
  14. minify:true,
  15. hash:true,
  16. cache:false,
  17. showErrors:false,
  18. "chunks": {
  19. "head": {
  20. "entry": "assets/head_bundle.js",
  21. "css": [ "main.css" ]
  22. },
  23. xhtml:false
  24. })
  25. ]
  26. }

</>复制代码

  1. --- header.html ---
  2. <span class="hljs-section"><%= htmlWebpackPlugin.options.title %></span>

作用:

</>复制代码

  1. title: 设置title的名字
  2. filename: 设置这个html的文件名
  3. template:要使用的模块的路径
  4. inject: 把模板注入到哪个标签后 "body",
  5. favicon: 给html添加一个favicon "./images/favico.ico",
  6. minify:是否压缩 {...} | false (最新api变动,原来是ture|false 感谢@onmi指正)
  7. hash:是否hashtrue false ,
  8. cache:是否缓存,
  9. showErrors:是否显示错误,
  10. chunks:目前没太明白
  11. xhtml:是否自动毕业标签 默认false
3. 提取样式插件

extract-text-webpack-plugin

</>复制代码

  1. 官网是这么解释的Extract text from bundle into a file.,把额外的数据加到编译好的文件中

</>复制代码

  1. var ExtractTextPlugin = require("extract-text-webpack-plugin");
  2. module.exports = {
  3. module: {
  4. loaders: [
  5. { test: /.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
  6. ]
  7. },
  8. plugins: [
  9. new HtmlWebpackPlugin({
  10. template: "./src/public/index.html",
  11. inject: "body"
  12. }),
  13. new ExtractTextPlugin("[name].[hash].css")
  14. ]
  15. }

说明:将css放到index.html的body上面

4. 拷贝资源插件

copy-webpack-plugin

</>复制代码

  1. 官方这样解释 Copy files and directories in webpack,在webpack中拷贝文件和文件夹

</>复制代码

  1. cnpm install --save-dev copy-webpack-plugin
  2. new CopyWebpackPlugin([{
  3. from: __dirname + "/src/public"
  4. }]),

</>复制代码

  1. 作用:把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内置插件 ]

</>复制代码

  1. new webpack.ProvidePlugin({
  2. $: "jquery",
  3. jQuery: "jquery",
  4. "window.jQuery": "jquery"
  5. }))
  6. new webpack.NoErrorsPlugin(),
  7. new webpack.optimize.DedupePlugin(),
  8. new webpack.optimize.UglifyJsPlugin(),
  9. new webpack.optimize.CommonsChunkPlugin("common.js")

作用: 和上面5个一一对应

</>复制代码

  1. 当模块使用这些变量的时候,wepback会自动加载。(区别于window挂载,感谢@lihuanghe121指正)
  2. 不显示错误插件
  3. 查找相等或近似的模块,避免在最终生成的文件中出现重复的模块
  4. 丑化js 混淆代码而用
  5. 提取公共代码的插件
二、一个完整的栗子

</>复制代码

  1. "use strict";
  2. // Modules
  3. var webpack = require("webpack");
  4. var autoprefixer = require("autoprefixer");
  5. var HtmlWebpackPlugin = require("html-webpack-plugin");
  6. var ExtractTextPlugin = require("extract-text-webpack-plugin");
  7. var CopyWebpackPlugin = require("copy-webpack-plugin");
  8. /**
  9. * Env
  10. * Get npm lifecycle event to identify the environment
  11. */
  12. var ENV = process.env.npm_lifecycle_event;
  13. var isTest = ENV === "test" || ENV === "test-watch";
  14. var isProd = ENV === "build";
  15. module.exports = function makeWebpackConfig() {
  16. var config = {};
  17. config.entry = isTest ? {} : {
  18. app: "./src/app/app.js"
  19. };
  20. config.output = isTest ? {} : {
  21. // Absolute output directory
  22. path: __dirname + "/dist",
  23. publicPath: isProd ? "/" : "http://localhost:8080/",
  24. filename: isProd ? "[name].[hash].js" : "[name].bundle.js",
  25. chunkFilename: isProd ? "[name].[hash].js" : "[name].bundle.js"
  26. };
  27. if (isTest) {
  28. config.devtool = "inline-source-map";
  29. } else if (isProd) {
  30. config.devtool = "source-map";
  31. } else {
  32. config.devtool = "eval-source-map";
  33. }
  34. config.module = {
  35. preLoaders: [],
  36. loaders: [{
  37. test: /.js$/,
  38. loader: "babel",
  39. exclude: /node_modules/
  40. }, {
  41. test: /.css/,
  42. loader: isTest ? "null" : ExtractTextPlugin.extract("style", "css?sourceMap!postcss")
  43. }, {
  44. test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
  45. loader: "file"
  46. }, {
  47. test: /.json$/,
  48. loader: "json"
  49. }, {
  50. test: /.scss/,
  51. loader: "style!css!sass"
  52. }, {
  53. test: /.html$/,
  54. loader: "raw"
  55. }]
  56. };
  57. if (isTest) {
  58. config.module.preLoaders.push({
  59. test: /.js$/,
  60. exclude: [
  61. /node_modules/,
  62. /.spec.js$/
  63. ],
  64. loader: "isparta-instrumenter"
  65. })
  66. }
  67. config.postcss = [
  68. autoprefixer({
  69. browsers: ["last 2 version"]
  70. })
  71. ];
  72. config.plugins = [];
  73. if (!isTest) {
  74. config.plugins.push(
  75. new HtmlWebpackPlugin({
  76. template: "./src/public/index.html",
  77. inject: "body"
  78. }),
  79. new ExtractTextPlugin("[name].[hash].css", {disable: !isProd})
  80. )
  81. }
  82. if (isProd) {
  83. config.plugins.push(
  84. new webpack.NoErrorsPlugin(),
  85. new webpack.optimize.DedupePlugin(),
  86. new webpack.optimize.UglifyJsPlugin(),
  87. new CopyWebpackPlugin([{
  88. from: __dirname + "/src/public"
  89. }]),
  90. new webpack.ProvidePlugin({
  91. $: "jquery",
  92. jQuery: "jquery",
  93. "window.jQuery": "jquery"
  94. }))
  95. }
  96. config.devServer = {
  97. contentBase: "./src/public",
  98. stats: "minimal"
  99. };
  100. return config;
  101. }();
三、调试技巧

</>复制代码

  1. if (isTest) {
  2. config.devtool = "inline-source-map";
  3. }

</>复制代码

  1. 作用: 使用source-map可以在debug的时候看到源代码,方便 查错

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79692.html

相关文章

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • 前端文档收集

    摘要:系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    jsbintask 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<